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图 灵 社 区 的 电子 书 没有 采用 专 有 客户 
端 ， 您 可 以 在 任意 设备 上 ， 用 自己 喜 
欢 的 浏览 器 和 PDF 阅读 器 进行 阅读 。 
但 您 购买 的 电子 书 仅 供 您 个 人 使 用 ， 
未 经 授权 ， 不 得 进行 传播 。 

我 们 愿意 相信 读者 具有 这 样 的 民 知 和 
觉悟 ， 与 我 们 共同 保护 知识 产权 。 
如 果 购 买 者 有 侵权 行为 ， 我 们 可 能 对 
该 用 户 实施 包括 但 不 限于 关闭 该 帐号 
等 维权 措施 ， 并 可 能 追究 法 律 责任 。 





刘涛 

网 络 常用 名 “武官 尚书 ”， 前 端 开发 工 
程 师 ， 目 前 就 职 于 奇 虎 360 搜 索 团 队 ， 
曾 在 多 个 平台 翻译 、 原 创 前 端 相关 文 
章 。 热 爱 前 端 ， 热 爱 翻 译 ， 关 注 前 端 技 
术 的 发 展 变迁 ， 热 衷 于 新 技术 的 学 习 研 
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内 容 提 要 


本 书 介绍 SVG 绘画 ， 包 括 基础 知识 和 如 何 通过 混合 和 搭配 工具 来 生成 复杂 
的 效果 。 主 要 内 容 有 :把 SVG 代码 转换 为 可 视图 形 的 泻 染 模型 ， 如 何 使 用 颜色 ， 
透明 度 的 控制 方法 以 及 它 对 图 片 的 影响 ， 泻 染 服 务 和 渐变 。 

本 书 适合 所 有 想 利 用 SVG 提高 Web 体验 的 读者 。 
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开创 着 未 来 ， 而 我 们 关注 真正 重要 的 技术 趋势 一 一 通过 放大 那些 “细微 的 信号 ”来 
| 激 社会 对 新 科技 的 应 用 。 作 为 技术 社区 中 活跃 的 参与 者 ，O’Reilly 的 发 展 充满 了 
二 创新 的 倡导 、 创 造 和 发 扬 光 大 。 


"Reilly 为 软件 开发 人 员 带 来 革命 性 的 “动物 书 ”; 创建 第 一 个 商业 网 站 (GNN) ; 
组 织 了 影响 深远 的 开放 源 代 码 峰 会 ， 以 至 于 开源 软件 运动 以 此 命名 ;创立 了 Make 





























杂志 ， 从 而 成 为 DIY 革命 的 主要 先锋 ， 公 司 一 如 既往 地 通过 多 种 形式 缔结 信息 与 


人 的 纽带 。O’Reilly 的 会 议和 峰会 聚集 了 众多 超级 极 客 和 高 瞻 远 瞩 的 商业 领袖 ， 共 
同 描绘 出 开创 新 产业 的 革命 性 思想 。 作 为 技术 人 士 获取 信息 的 选择 ，O'Reilly 现在 






































还 将 先锋 专家 的 知识 传递 给 普通 的 计算 机 用 户 。 无 论 是 通过 书籍 出 版 、 在 线 服务 或 























者 面授 课程 ， 每 一 项 OReilly 的 产品 都 反映 了 公司 不 可 动摇 的 理念 信息 是 激发 
创新 的 力量 。 
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“O'Reilly 凭借 一 系列 (真希 望 当 初 我 也 想到 了 ) 非凡 想法 建立 了 数 百 万 美元 的 
业务 。” 
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“O'Reilly Conference 是 聚集 关键 思想 领袖 的 绝对 典范 。” 


“一 本 O'Reilly 的 书 就 代表 一 个 有 用 、 有 前 途 、 需 要 学 习 的 主题 。” 
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“Tim 是 位 特 立 独行 的 商人 ， 他 不 光 放 眼 于 最 长 远 、 最 广阔 的 视野 并 且 切 实地 
按照 Yogi Berra 的 建议 去 做 了 :“ 如 果 你 在 路 上 遇 到 岔路 口 ， 走 小 路 (岔路 ),” 
回顾 过 去 ，Tim 似乎 每 一 次 都 选择 了 小 路 ,而 且 有 几 次 都 是 一 闪 即 逝 的 机 会 ， 
尽管 大 路 也 不 错 。” 





Linux Journal 






















































































前 言 和 ix 
第 1 章 你 应 该 知道 的 事 有 1 
1.1 SVG 通过 代码 来 画图 和 1 
1.2 SVG 始终 是 开源 的 REE sanwagenasieassssweseensaen ase ssseantess vas cstiess «3 2 
1.3 SVG 是 XML (有 时 也 是 HTML 2 
1.4 SVG 是 可 压缩 的 区 2 
15 MARJE enne 3 
16 KRPE YEA ee 3 
ET IAE A AREE A E E T RS 3 
1.8 艺术 源 于 数学 eeeeereeeeererererererereserertreererereretenertrerenenererenererereerserenreeerereeeee 3 
1.9 SVG 是 无 数 canvas HJA RRE eeeeeeeeeereeerererrrerererererererererenererereeenerenreeererereee 3 
1.10 SVG 是 有 结构 的 EE 4 
1.11 SVG 是 有 样式 的 和 4 
1.12 所 有 好 用 的 标记 都 基于 伟大 的 DOM 4 
RERE EE i 5 
1.14 SVG 在 发 展 变化 -ee 5 
第 2 E e 6 
2.1 使 用 FUU 属性 进行 填充 二 ee 7 
2.2 使 用 stroke ae ET A nts E cessnsastesy oss 10 
2.3. JFL PEFR e cece ce ee eee ce eee eee tee teeeeteeeeeseneeteesetesenseneeseneneenseraseneeseesenees 15 
2.4 (i Aye Ue Bs gee a a tases? 22 






































3.1 BEA Bi BUREN BRET onesies 26 
DEE A A 31 
33 自 定义 颜色 AR 34 
3.4 混合 和 搭配 Te 41 
第 4 章 透明 i 44 
4.1 穿 透 样 式 PEET E RP TE Te A TR 44 
42 其 他 效果 PO 49 
第 5 章 泻 染 服务 a 52 
5.1 泻 染 和 壁纸 RTO TO TT 52 
52 标识 资源 53 
53 纯色 渐变 56 
第 6 章 简单 的 渐变 61 
AEE e 61 
6.2 ”透明 渐变 64 
MN ae 衣 生生 65 
第 7 章 “各 种 形状 和 尺寸 的 渐变 二 ee 70 
7.1 渐变 矢量 a 70 
72 对 象 边 界 盒 OO 74 
7.3 ”在 盒子 表面 绘制 和 78 
7.4 渐变 ， 变换 TR PEPE RE OR 83 
第 8 章 重复 人 92 
8.1 如 何 扩展 渐变 E A IAIA AAAA ETA AEAN EE EE AE EEEE 92 
82 无 穷 渐变 映射 94 
8.3“ 非 映射 重复 95 
8.4 在 HIML 中 使 用 ( 复 用 ) 渐变 和 ee 98 
A SD Ra Se isaac ere eee: 111 
9.1 径 向 渐变 基础 111 
9.2” 盾 充 颌 卫 ee 113 
9.3 缩放 圆 人 117 





vi | 目录 























9A VREE aa ecu ea aE 120 
9.5 ”变换 径 向 渐变 123 
o LIL ae ea arc rasa anes fe seared acces aN 124 
COR A agate ee ee tiie tenets entertain 136 
10.1 搭 积 PO TP 137 
10.2 EAP eeeeeeeerererererererererererererenererereresrtenrerensrererenenereeenenenerenenereneeesenet 143 
10.3 布局 磁 贴 a dda sca dhadobaaulbavasuedonbbacdwedsedesdunaduaaueess saasnasdestined TE 146 
10.4 变换 磁 贴 OT TO PET PO 151 
第 11 章 完美 的 图 片 图 案 A 158 
11.1 层次 感 a 158 
DDS E en 162 
113 SVG REIHER E sececocseestssstssnestonentnnenensnsnsssanannsaveie 165 
B127 AAEM eieiei 173 
12.1 边界 文本 ee 174 
12.2 ”中 途 切 换 样式 和 179 
第 13 章 绘制 线条 Sse sete encneecsen tenant etn ache acaecte cess dnnantannaehaehtanaetar ate 184 
13:1 超出 边缘 的 部 分 es 184 
13.2 ” 守 盒 子 生 ee 186 
13.3 ”使 用 坐标 室 间 vere eeeeeee ee eeeeeteeeeeseteeseteteensessesetsesessesssecnsesesecnsessesseneenecetees 192 
13.4 有 图 案 的 线条 OEE OU COO TT RO E E 196 
第 14 章 动画 有 198 
14.1 动画 选项 GD ot Molo LER RD 198 
14.2 坐标 动画 A EO TATE EEPE AAA OR EET 204 
14.3 交互 动画 208 
附录 A 颜色 关键 词 和 语法 和 223 
附录 B 元素， 元素 属性 ， 样 式 属性 和 ee 229 
作者 介绍 人 236 
封面 介绍 本 236 





目录 | vii 





z| 
mi} 


本 书 深 入 讨论 了 SVG 的 一 个 特定 的 方面 : 绘画 。 这 里 的 绘画 使 用 的 不 是 油 
墨 或 水 彩 ， 而 是 可 被 计算 机 转化 为 有 色 像 素 的 图 形 指令 。 本 书 探讨 了 创建 
它 的 可 能 性 以 及 阐 在 的 风险 。 书 中 不 仅 描 述 了 一 些 基 础 知识 ， 还 介绍 了 如 
何 通过 混合 和 搭配 工具 来 生成 复杂 的 效果 。 


本 书 起 源 于 一 个 介绍 如 何在 Web 上 使 用 SVG 的 项 目 。 为 了 保证 本 书 篇 幅 
适中 ， 并 适合 入 门 读者 ， 许 多 细节 和 复杂 的 部 分 我 们 不 再 费 述 。 但 这 些 细 
节 和 复杂 内 容 会 使 作为 图 片 格式 的 SVG 更 加 丰富 、 美 妙 。 擎 握 了 SVG 基 
础 后 ， 你 就 可 以 考虑 去 制作 更 加 复杂 的 绘画 和 更 加 细致 的 效果 。 


本 书 内 容 


如 果 你 正在 阅读 本 书 ， 我 们 希望 你 已 经 熟悉 了 SVG 的 基础 知识 ， 例 如 如 
何 把 图 形 定义 为 一 系列 形状 ， 如 何 将 图 形 作为 一 个 单独 的 图 片 文件 或 作为 
HTML 页 面 中 的 标记 来 使 用 。 如 果 你 不 确定 是 否 已 经 准备 好 ， 第 1 章 会 带 
你 回顾 一 些 应 该 知道 的 基础 概念 。 


本 书 的 剩余 部 分 着 重 讲解 SVG 颜色 、 图 案 以 及 渐变 。 


。 第 2 章 讨论 了 把 SVG 代码 转换 为 可 视图 形 的 渲染 模型 ， 还 介绍 了 可 以 设 
置 在 形状 和 文本 上 以 控制 它们 如 何 绘制 在 屏幕 上 的 基础 属性 。 

。 第 3 章 着 重 讲解 了 颜色 : 它 在 自然 界 中 是 如 何 工作 的 ， 在 计算 机 中 又 是 
如 何 工 作 的 ， 以 及 如 何在 SVG 代码 中 指定 颜色 。 

。 第 4 章 中 讨论 了 透明 度 ， 更 确切 地 说 ， 是 不 透明 度 ， 还 介绍 了 控制 图 形 
不 透明 度 的 多 种 方法 ， 以 及 它们 是 如 何 影响 最 终 效果 的 。 
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第 5 MPSA TMA MS: 定义 其 他 SVG 图 形 和 文本 如 何 被 绘制 
到 屏幕 上 的 复杂 图 形 内 容 。 这 一 章 还 介绍 了 纯色 泻 染 服务 ， 你 最 初 可 能 
会 觉得 它 用 处 不 大 ， 但 实际 上 却 很 有 用 。 

第 6 章 着 眼 于 渐变 ， 主 要 讲解 了 通过 调整 结 点 的 位 置 和 属性 来 创建 不 同 
的 颜色 过 渡 效 果 。 
第 7 章 探讨 了 如 何 控制 线性 新 变 在 要 浑 染 的 形状 内 移动 。 
第 8 章 介 绍 了 重复 线性 渐变 以 及 利用 它们 可 以 实现 的 一 些 效果 ， 同 时 还 
介绍 了 一 些 在 HTML 页 面 中 使 用 渐变 (以 及 其 他 演 染 服务 ) 生成 内 联 
SVG 图 标的 示例 和 小 技巧 。 

第 9 章 着 眼 于 径 向 渐变 ， 包 括 重复 径 向 渐变 ， 最 后 还 给 出 了 一 些 使 用 多 
个 渐变 来 创建 复杂 效果 的 例子 。 

第 10 章 介 绍 了 <pattern>， 它 用 于 创建 重复 的 磁 贴 和 纹理 。 

第 11 章 展示 了 如 何 使 用 图 案 来 定义 用 于 填充 形状 或 文本 的 单个 图 像 或 
图 形 。 
第 12 章 详细 介绍 了 泻 染 服务 是 如 何 应 用 到 文本 上 的 。 

第 13 章 讨 论 了 使 用 泻 染 服 务 绘制 描 边 区 域 而 非 填 充 区 域 时 出 现 的 一 些 
问题 。 
第 14 章 给 出 了 一 些 给 泻 染 服务 添加 动画 的 例子 ， 还 讨论 了 在 SVG 中 可 
用 的 不 同 添加 动画 方法 的 优点 与 局 限 。 















































本 书 最 后 的 两 个 附录 提供 了 把 理论 用 到 实践 中 时 会 用 到 的 基本 语法 ， 可 供 
你 快速 参考 。 


附录 A 重 述 了 定义 颜色 的 多 种 方法 ， 包 括 所 有 预定 义 的 颜色 关键 词 。 
附录 B 总 结 了 所 有 的 渲染 服务 元 素 、 它 们 的 属性 ,以 及 相关 的 样式 属性 。 





无 论 你 是 随便 翻阅 本 书 ， 还 是 从 头 到 尾 仔细 阅读 ， 理 解 如 下 用 于 提供 额外 
信息 的 小 指南 ， 你 可 以 获得 更 多 知识 。 
关于 示例 


SVG 图 像 可 以 使 用 许多 不 同类 型 的 软件 来 展示 和 操作 ， 且 每 个 程序 在 SVG 
代码 的 解析 上 略 有 不 同 。 尤 其 在 图 形 文件 分 发 在 Web 上 时 ， 这 确实 是 个 问 

















题 ， 你 希望 人 们 在 另 一 端 看 到 的 内 容 与 你 期 望 的 效果 无 限 接 近 。 
x | 前 言 


因此 本 书 中 的 例子 在 桌面 最 新 稳定 版 (2015 年 7 H) 的 Chrome, Firefox, 
Internet Explorer 以 及 Safari 浏览 器 中 都 进行 了 测试 。 缺 陷 、 漏 洞 以 及 浏览 
器 的 支持 程度 都 在 文本 中 有 所 注 明 。 此 外 ， 还 提 到 了 微软 Edge 浏览 器 预期 
在 支持 程度 上 的 更 改 。 


几乎 所 有 其 他 训 览 器 使 用 的 都 是 某 一 主要 开源 这 染 库 的 变 体 : Gecko 
(Firefox), WebKit (Safari 以 及 iOS 设备 ) 或 Chromium/Blink (WebKit a 
一 个 分 支 ， 主 要 为 Chrome FAR). Ak, PRT LALA SE 0 ba as Sc FY. 
作为 指南 ， 但 要 注意 的 是 并 非 所 有 软件 都 会 同时 更 新 。 ional 
即使 某 些 功能 在 技术 上 是 支持 的 ， 但 会 受到 实际 性 能 的 限制 。 某 些 移动 浏 
览 器 (例如 Opera Mini) 会 刻意 限制 它们 支持 的 功能 来 提升 性 能 


SVG 还 可 以 用 在 Adobe Illustrator 和 Inkscape 等 图 形 程 序 中 。 有 很 多 工具 ， 
例如 Apache Batik 或 libRSVG， 可 以 把 SVG 代码 转换 为 其 他 矢量 图 形 格 
式 ， 比 如 PDF 文档 。 这 些 工具 都 会 有 新 的 兼容 性 问题 ， 这 在 本 书 中 没有 详 
细 介 绍 。 一 定 要 小 心地 在 所 有 需要 使 用 的 工具 中 测试 ! 


使 用 代码 示例 
补充 材料 (代码 示例 和 图 形 ) 可 以 从 以 下 网 址 在 线 获取 。 
下 载 地 址 : https://github.com/oreillymedia/S VG_Colors_Patterns_Gradients, 










































































在 线 观看 地 址 : http://oreillymedia.github.io/SVG_Colors_Patterns_Gradients/。 


本 书 是 要 帮 你 完成 工作 的 。 一 般 情 况 下 ， 如 果 书 中 提供 了 示例 代码 ， 你 上 
以 在 你 的 程序 或 文档 中 使 用 ， 且 不 用 联系 我 们 获得 许可 ， 除 非 你 大 量 复制 
我 们 的 代码 。 例 如 ， 在 你 的 程序 中 使 用 本 书 中 的 几 个 代码 块 不 需要 获得 我 
们 的 许可 。 销 售 或 分 发 O'Reilly 图 书 中 示例 的 CD-ROM 需要 获得 许可 。3 引 
用 本 书 及 引用 示例 代码 来 回答 问题 不 需要 获得 我 们 的 许可 。 将 本 书 中 大 量 
示例 代码 合并 到 你 的 产品 文档 中 时 需要 获得 许可 。 

我 们 很 希望 但 并 不 强制 要 求 你 在 引用 本 书 内 容 时 加 上 引用 说 明 。 引 用 说 
明 一 般 包 括 书 名 、 作 者 、 出 版 社 和 ISBN。 上 比如 : “SVG Colors, Patterns & 
Gradients by Amelia Bellamy-Royds and Kurt Cagle (O’Reilly). Copyright 2016 
Amelia Bellamy-Royds and Kurt Cagle, 978-1-4919-3374-9.” 


如 果 你 觉得 对 代码 示例 的 使 用 不 属于 合理 使 用 或 超出 了 上 述 许可 范围 ， 请 
随时 通过 permissions@oreilly.com 联系 我 们 。 
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排版 约定 
本 书 使 用 的 排版 约定 如 下 。 
。 楷体 
表示 新 术语 。 
等 宽 字 体 (constant width ) 
表示 程序 片段 ， 以 及 正文 中 出 现 的 变量 、 函 数 名 、 数 据 库 、 数 据 类 型 、 
环境 变量 、 语 名 和 关键 字 等 。 
加 粗 等 宽 字 体 (constant width bold ) 
表示 应 该 由 用 户 输入 的 命令 或 其 他 文本 。 
= AK (Constant width italic) 
表示 应 该 由 用 户 输入 的 值 或 根据 上 下 文 确 定 的 值 替 换 的 文本 。 











该 图 标 用 于 突出 SVG 中 特别 复杂 的 部 分 ， 或 初 看 不 太 明 
显 的 简单 的 快捷 方式 。 




















该 图 标 表示 一 般 的 广 记 和 有 趣 的 背景 信息 


这 样 的 警告 信息 将 用 于 突出 不 同 浏览 器 (或 其 他 软件 ) 
之 间 ， 或 SVG 作为 XML 文件 和 在 HTML 页 面 中 使 用 
SVG 之 间 的 兼容 性 问题 。 





除 此 之 外 ， 如 下 样式 将 用 于 补充 信息 。 


简介 
本 书 中 使 用 了 两 种 类 型 的 附注 栏 。“ 聚 焦 未 来 ”将 讨论 尚未 标准 化 的 拟定 功 
能 ， 或 还 没有 广泛 实施 的 新 标准 。 “CSS 与 SVG” 将 SVG 图 形 效果 和 创建 
相似 效果 的 CSS 样式 (如 果 有 的 话 ) 进行 比较 。 

















虽然 附注 栏 对 于 理解 SVG 颜色 、 图 案 和 渐变 并 不 是 必要 的 ， 但 在 规划 一 
完整 的 Web 项 目 时 它们 可 能 会 添加 重要 的 上 下 文 。 





Safari? Books Online 


e Safari Books Online (http:/Avww.safaribooksonline. 

4 Satay) om 是 应 运 而 生 的 数字 图 书馆 。 它 同时 以 图 书 

和 视频 的 形式 出 版 世界 顶级 技术 和 商务 作家 的 专 

业 作品 。 技 术 专 家 、 软 件 开 发 人 员 、Web 设计 师 、 商 务 人 士 和 创意 专家 等 ， 

在 开展 调研 、 解 决 问 题 、 学 习 和 认证 培训 时 ， 都 将 Safari Books Online 视 作 
获取 资料 的 首选 渠道 。 

对 于 组 织 团体 、 政 府 机 构 和 个 人 ，Safari Books Online 提供 各 种 产品 组 合 和 

灵活 的 定价 策略 。 用 户 可 通过 一 个 功能 完备 的 数据 库 检索 系统 访问 O'Reilly 


Media, Prentice Hall Professional, Addison-Wesley Professional, Microsoft 


























Press. Sams, Que, Peachpit Press, Focal Press, Cisco Press, John Wiley & 
Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, 
FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, 
Course Technology 以 及 其 他 几 十 家 出 版 社 的 上 千 种 图 书 、 培 训 视 频 和 正式 
出 版 之 前 的 书稿 。 要 了 解 Safari Books Online 的 更 多 信息 ， 我 们 网 上 见 。 


联系 我 们 
请 把 对 本 书 的 评价 和 问题 发 给 出 版 社 。 
美国 : 

O’Reilly Media, Inc. 


1005 Gravenstein Highway North 
Sebastopol, CA 95472 


中 国 : 
北京 市 西城 区 西直门 南大 街 2 号 成 铭 大 厦 C 座 807 (100035) 
LARA Si (AE) 有 限 公司 


O'Reilly 的 每 一 本 书 都 有 专属 网 页 ， 你 可 以 在 那儿 找到 本 书 的 相关 信息 ， 包 
括 勘 误 表 、 示 例 代码 以 及 其 他 信息 。 本 书 的 网 站 地 址 是 : 


http://bit.ly/svg-colors-patterns-and-gradients 

































































对 于 本 书 的 评论 和 技术 性 问题 ， 请 发 送 电 子 邮件 到 : 
bookquestions@oreilly.com 

要 了 解 更 多 O'Reilly 图 书 、 培 训 课程 、 会 议和 新 闻 的 信息 ， 请 访问 以 下 

网 站 : http://www.oreilly.com 

我 们 在 Facebook 的 地 址 如 下 : http://facebook.com/oreilly 

请 关注 我 们 的 Twitter 动态 : http://twitter.com/oreillymedia 

我 们 的 YouTube 视频 地 址 如 下 : http:Wwww.youtube.comyoreillymedia 
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电子 书 


扫描 如 下 二 维 码 ， 即 可 购买 本 书 电 子 书 。 















































第 1 章 


你 应 该 知道 的 事 





本 书 假设 你 已 经 了 解 过 SVG、 网 页 设计 ， 甚 至 有 JavaScript 编程 基础 。 


每 一 种 语言 都 有 自己 的 一 些 缺陷 ， 而 这 些 缺 陷 对 有 些 开发 者 来 说 很 明确 ， 
但 对 其 他 同样 优秀 的 开发 者 来 说 却 闻 所 未 闻 。 所 以 本 章 将 带 你 一 起 快速 回 
顾 一 些 你 必须 知道 的 东西 。 


1.1 SVG 通过 代码 来 画图 


SVG 就 是 一 个 图 片 文件 。 我 们 可 以 像 使 用 PNG 或 JPEG 等 图 片 文件 一 样 使 
用 它 ， 可 以 在 可 视 化 编辑 器 中 创建 和 编辑 SVG, tay DRE Ey A 
到 网 页 中 。 


但 是 SVG 并 不 仅仅 是 图 片 ， 它 是 包含 标记 元 素 、 文 本 、 样 式 指令 的 结构 化 
文档 。 其 他 图 片 格式 是 告诉 计算 机 在 屏幕 上 哪 一 点 应 该 绘制 什么 颜色 ， 而 
SVG 是 告诉 计算 机 如 何 通过 它 的 组 成 部 分 重组 图 形 。 这 产生 以 下 两 个 主要 
结果 。 


。 SVG 最 终 在 屏幕 上 的 显示 依赖 于 软件 对 SVG 规范 的 支持 程度 。 跨 浏览 
器 的 兼容 性 往往 是 一 个 问题 。 

。 对 SVG 的 一 部 分 单独 进行 增加 、 删 除 、 修 改 的 操作 是 非常 容易 的 ， 不 用 
担心 会 改变 SVG 的 其 他 部 分 。 我 们 可 以 在 编辑 器 中 进行 此 类 操作 ， 也 可 
以 动态 地 在 网 页 中 制作 动画 或 交互 图 形 。 















































1.2 SVG 始终 是 开源 的 


SVG 不 仅仅 是 一 组 计算 机 编码 指令 ， 它 还 是 人 类 可 读 的 文本 文件 。 你 不 仅 
可 以 在 文本 编辑 器 中 编辑 SVG， 甚至 还 可 以 在 有 语法 高 亮 和 自动 补 全 功能 
的 代码 编辑 器 中 编辑 它 。 


本 书 的 所 有 例子 都 专注 于 基本 的 SVG 代码 。 当 然 你 也 可 以 通过 可 视 化 编辑 
器 来 画 形状 、 选 颜色 、 调 整 图 形 展现 的 其 他 部 分 。 但 是 为 了 完全 可 控 ， 你 
需要 看 一 看 编辑 器 实际 创建 的 代码 。 


1.3 SVG 是 XML (有 时 也 是 HTML) 


文本 编辑 器 中 的 SVG 代码 看 起 来 非常 像 HTML 代码 (全 是 尖 括 号 和 属性 )， 
但 是 单独 的 SVG 文件 通常 被 解析 为 XML。 这 意味 着 你 的 SVG 通常 都 可 以 
被 XML 工具 解析 和 操控 ， 也 意味 着 如 果 你 忘记 引入 XML 的 命名 空间 或 者 
混淆 了 XML 语法 的 重要 细节 ， 你 的 网 页 将 什么 都 不 显示 。 


然而 ， 当 你 直接 在 HTMLS 标记 中 插入 SVG 时 ， 它 将 由 HTML 解析 器 处 
BE. HTML 解析 器 会 忽略 一 些 错误 《比如 缺少 结束 标签 或 使 用 不 带 引 号 的 
属性 ) ， 而 在 XML 解析 器 〈 或 大 多 数 仅 支持 SVG 的 图 形 编辑 器 ) 中 这 将 导 
致 解析 失败 。 它 也 会 忽略 自 定义 的 命名 空间 ， 将 不 能 识别 的 属性 或 标签 名 
变 成 小 写 ， 其 至 引起 其 他 不 能 预期 的 变化 。 


1.4 SVG 是 可 压缩 的 


SVG 的 大 部 分 语法 的 设计 都 是 为 了 使 其 易于 阅读 和 理解 ， 而 不 是 为 了 结构 
紧凑 ， 这 使 得 某 些 SVG 文件 看 起 来 相当 元 长 和 宛 余 。 但 是 ， 这 也 使 得 SVG 
非常 适合 通过 gzip 压缩 ， 而 网 页 中 的 SVG 都 应 该 被 压缩 。 通 常 ， 这 将 使 文 
件 大 小 减少 一 半 甚 至 更 多 。 在 普通 的 文件 服务 器 上 存储 压缩 过 的 SVG hH, 
通常 使 用 .svgz 作为 扩展 名 。 


SVG 也 是 容易 腔 肿 的 ， 这 也 在 另 一 方面 使 它 可 压缩 。 大 多 数 SVG 编辑 器 通 
过 给 定 唯 一 的 XML 命名 空间 ， 在 SVG 文件 中 添加 自己 的 元 素 和 属性 。 有 
些 优化 工具 开发 了 在 不 影响 最 终结 果 的 基础 上 把 代码 剥离 出 来 的 功能 。 在 
使 用 这 些 工具 时 ， 如 果 你 自己 操作 了 代码 ， 配 置 的 时 候 就 要 特别 小 心 ， 优 
化 工具 有 可 能 会 删除 掉 你 以 后 想 要 使 用 的 属性 。 


































































































15 图片 是 形状 的 集合 


那么 这 所 有 的 代码 想 要 表现 的 是 什么 呢 ? 当然 是 形状 ! “(也 可 能 是 文本 或 
舱 入 的 图 像 ， 这 些 我 们 将 在 后 面 介绍 ,) SVG 只 有 少数 不 同 的 形状 元 素 : 
<rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon> 以 及 <path>。 
但 是 ， 最 后 三 种 能 够 以 一 定 的 精确 度 ， 定 制 你 能 想象 的 任何 形状 。 特 别 是 
<path>， 我 们 可 以 通过 它 自己 的 特性 来 描绘 曲线 和 线条 ， 以 此 来 创建 形状 。 


1.6 图片 中 可 以 包含 图 片 


每 个 SVG 都 是 一 张 图 片 ， 但 是 它 同时 也 是 一 个 文档 ， 文 档 中 可 以 通过 使 用 
<image> 标签 来 包含 其 他 图 片 。 先 入 的 图 片 可 以 是 其 他 SVG 文件 ， 也 可 以 
ze PNG 或 JPEG 等 光栅 图 片 。 然 而 ， 出 于 安全 和 性 能 的 考虑 ，SVG 有 时 用 
于 避免 外 部 图 片 (以 及 其 他 外 部 资源 ， 比 如 样式 表 和 字体 ) 被 下 载 。 尤 其 
是 当 SVG 在 HTML 页 面 中 作为 幅 入 图 片 (<img> 元 素 ) 或 者 背景 图 片 被 显 
示 时 ， 我 们 将 不 能 使 用 外 部 文件 。 


1.7 文本 也 是 艺术 


SVG 的 最 后 一 个 用 途 是 构建 文本 。 但 是 文本 不 是 图 形 的 替代 ， 构 成 文本 的 
字母 将 会 像 其 他 类 型 的 矢量 图 形 一 样 被 处 理 。 尤 为 重要 的 是 ， 文 本 可 以 使 
用 与 矢量 形状 完全 相同 的 样式 属性 来 绘制 。 


1.8 艺术 源 于 数学 


所 有 矢量 图 形 (形状 或 文本 ) 的 核心 是 ， 使 用 每 个 元 素 的 浏览 器 SVG 演 染 
函数 中 的 数学 参数 XML 属性 )， 控 制 最 终 效 果 。SVG 中 最 基本 的 数学 概 
念 是 坐标 系 ， 用 于 确定 图 形 中 每 一 个 点 的 位 置 。 我 们 可 以 通过 设置 viewBox 
属性 来 设置 初始 坐标 系 ， 然 后 通过 坐标 系 的 转换 来 移动 、 拉 伸 、 旋 转 、 倾 
斜 特 定 元 素 。 


1.9 SVG 是 无 数 canvas 的 有 限 集 

在 计算 机 精度 允许 的 范围 内 ， 可 以 给 矢量 形状 添加 任意 多 个 坐标 。 不 
过 最 终 显 示 的 是 viewBox 属性 建立 的 特定 范围 坐标 内 的 形状 。 通 过 给 
preserveAspectRatio 设置 不 同 的 值 来 控制 在 宽 高 比 不 匹配 时 ， 如 何 把 坐标 
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的 范围 缩放 到 视图 区 域 (viewport) 。 


RE <svg> 元 素 或 复 用 <symbol> 元 素 可 以 创建 租 套 的 视 口 ， 它 们 除了 提供 
控制 宽 高 比 的 区 域外 ， 还 定义 了 确定 子 元 素 百 分 比值 的 依据 。 其 他 元 素 还 
可 以 使 用 viewBox 属性 来 创建 一 个 伸缩 到 合适 大 小 的 效果 (我们 将 在 第 11 
章 的 <pattern> 元 素 中 学 习 ) ， 而 不 用 重新 去 定义 百分比 。 


1.10 SVG 是 有 结构 的 


SVG 的 结构 包括 浑 染 到 屏幕 上 的 基本 形状 、 文 本 和 图 片 以 及 用 来 定义 几何 
图 形 的 属性 。 我 们 可 以 按照 逻辑 来 把 元 素 进行 分 组 ， 以 此 来 创建 更 加 丰富 
的 SVG。 我 们 可 以 给 不 同 的 组 设置 不 同 的 样式 或 者 转换 其 坐标 系 ， 还 可 以 
给 它们 添加 可 访问 名 称 和 描述 来 解释 图 形 到 底 表 示 什 么 。 


1.11 SVG 是 有 样式 的 


SVG 图 形 可 以 仅仅 由 所 有 的 样式 信息 都 通过 属性 来 设置 的 XML 元 素 组 成 。 
当然 ， 这 些 和 表现 相关 的 样式 也 可 以 通过 CSS 规则 来 设 定 ， 比 如 通过 class 
或 者 元 素 类 型 来 控制 。 还 可 以 使 用 媒体 属性 或 瞬时 状态 等 有 条 件 的 CSS 样 
式 ， 比 如 :hover 和 :focus。 


严格 分 开 几 何 结构 (XML 属性 ) 和 表现 样式 (表现 属性 或 者 CSS 样式 规 
WU) 是 有 些 武 断 的 。 随 着 SVG 的 发 展 ， 这 两 者 之 间 的 界限 将 越 来 越 模糊 。 
SVG 2 的 规范 草案 把 许多 布局 属性 升级 为 表现 属性 。 这 便 可 以 通过 灵活 的 
CSS 语法 来 提供 以 下 特性 : 通过 类 给 相似 元 素 设置 一 个 差不多 的 尺寸 ， 然 
后 再 通过 CSS 伪 类 或 媒体 查询 来 修改 具体 的 尺寸 或 布局 。 


1.12 ”所 有 好 用 的 标记 都 基于 伟大 的 DOM 


浏览 器 会 把 SVG 标记 和 样式 转换 成 一 个 文档 对 象 模型 (document object 
model, DOM), DOM 可 以 通过 JavaScript 进行 操作 。 针 对 XML 内 容 的 
DOM 的 所 有 核心 方法 同样 适用 ， 所 以 我 们 可 以 创建 和 重 排 元 素 ， 获 取 和 设 
置 属 性 的 值 ， 查 询 计算 后 的 样式 的 值 。 


SVG 规范 还 定义 了 SVG DOM 元 素 特有 的 属性 和 方法 ， 这 使 得 我 们 可 以 更 
简单 地 从 数学 角度 操作 几何 图 形 。 浏 览 器 对 SVG DOM 的 支持 可 能 不 尽 如 
人 意 ， 但 一 些 方法 一 一 比如 确定 一 条 曲线 的 长 度 一 一 在 SVG 的 设计 中 是 不 
可 或 缺 的 。 
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1.13 SVG 是 可 移动 的 


在 支持 脚本 的 动态 SVG 查看 器 (比如 Web 浏览 器 ) 中 ， 可 以 使 用 脚本 来 创 

建 动画 和 可 交互 的 图 形 。SVG 还 支持 交互 的 声明 方式 ， 你 可 以 定义 整个 交 

互 的 克 围 ， 浏 览 器 通过 自己 的 优化 方式 来 应 用 它 。 这 有 两 种 实现 方式 。 

。 借鉴 SMIL (Synchronized Multimedia Integration Language， 同 步 多 媒体 
集成 语言 ) 的 语法 ， 在 标记 中 使 用 动画 元 素 。 

。 在 表现 样式 中 使 用 CSS 动画 和 过 渡 。 

在 编写 本 书 的 时 候 ， 脚 本 动画 已 经 得 到 所 有 Web 浏览 器 的 支持 ， 但 可 能 天 

Ay SVG 的 某 些 用 途 而 受到 阻 得。 声明 式 动画 (SMIL 和 CSS) 在 大 多 数 浏 

览 器 中 也 得 到 了 支持 ， 但 并 不 是 所 有 (IE 浏览 器 显然 是 个 例外 ) 。 此 外 ， 浏 

览 器 也 开始 实现 新 的 Web 动画 API， 这 将 使 得 脚本 可 以 像 声 明 式 动画 那样 

定义 和 触发 独立 运行 的 动画 。 


1.14 SVG 在 发 展 变化 


在 你 与 SVG 交互 时 ， 不仅 SVG 图 形 可 以 单独 改变 ，SVG 的 定义 也 可 以 改 
变 。 目 前 (撰写 本 书 时 ) 的 既定 标准 是 SVG 1.1， 但 具有 新 特性 和 更 明确 地 
定义 已 有 特性 的 SVG 2 规范 正在 制定 中 。 此 外 ， 由 于 SVG 使 用 了 CSS 和 
JavaScript， 并 且 由 于 它 很 大 程度 地 集成 在 HTML 中 ， 这 些 语言 的 变化 也 将 
影响 SVG。 
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如 果 我 让 你 画 一 个 黄色 的 圆 ， 然 后 给 它 加 一 个 蓝 色 的 轮廓 ， 它 看 起 来 会 和 
画 一 个 蓝 色 的 圆 并 用 黄色 填充 的 效果 一 样 吗 ? 


如 果 我 让 你 画 一 个 红色 的 五 边 形 和 一 个 绿色 的 正方 形 ， 且 它们 的 中 心 点 是 
页 面 中 的 同一 点 ， 图 片 的 大 部 分 会 是 红色 还 是 绿色 ? 


在 用 手 画 图 时 是 没有 固定 规则 的 。 如 果 有 人 给 了 了 你 模棱两可 的 指示 ， 你 通 
常会 向 他 寻求 解释 。 但 是 当 你 向 计算 机 发 出 指令 时 ， 它 只 能 按 着 你 的 要 求 
执行 ， 所 以 你 必须 保证 能 准确 地 表达 你 的 意思 。 

即使 你 使 用 SVG 很 长 时 间 了 (我 们 假设 你 至 少 使 用 过 一 段 时 间 )， 也 很 可 能 
没有 深入 思考 过 计算 机 是 如 何 把 SVG 代码 转换 成 屏幕 上 的 彩色 图 案 的 。 如 
果 你 的 确 要 画 许多 这 样 的 彩色 图 案 ， 就 需要 知道 你 的 指令 是 如 何 被 解析 的 。 


本 章 将 讨论 SVG 泻 染 模型 的 基本 原理 ， 也 就 是 计算 机 解析 SVG 标记 和 样 
式 来 生成 图 画 的 过 程 ， 还 将 回顾 定义 SVG 图 形 和 文本 绘制 方式 的 基本 属 
性 一 一 fill 和 stroke。 本 书 其 余部 分 的 内 容 可 以 概括 为 定义 fill 或 stroke 
属性 值 的 不 同方 式 。 


SVG 的 渲染 模型 被 称 为 画家 模型 。 就 像 在 墙 上 涂 层 ， 上 层 的 内 容 会 遮盖 下 
层 的 内 容 。SVG 规范 定义 了 哪些 内 容 放 在 其 他 内 容 之 上 。 本 章 还 会 讨论 
z-index 和 paint-order 这 两 个 允许 你 改变 渲染 规则 的 属性 。 这 两 个 属性 由 
SVG 2 引入 ， 并 且 刚 刚 开 始 在 一 些 Web 浏览 器 中 得 到 支持 。 所 以 我 们 也 会 
介绍 如 何 用 SVG 1.1 的 代码 来 实现 相同 的 效果 。 





































































































2.1 使 用 fill 属 性 进行 填充 


SVG 代码 中 的 基本 元 素 和 属性 可 以 精确 地 定义 几何 形状 。 例 如 创建 一 个 1 
平方 英寸 的 正方 形 ， 它 的 左上 角 就 是 坐标 系 的 原点 ， 代 码 如 下 所 示 : 


<rect width="1in" height="1in" /> 


创建 一 个 直径 为 10 厘米 的 圆 ， 并 把 它 放 置 在 坐标 系 的 中 心 ， 代 码 如 下 : 
<circle cx="50%" cy="50%" r="5cm" /> 


本 书 不 准备 花费 大 量 的 时 间 去 讲解 你 画 的 图 形 的 几何 结构 。 
但 需要 注意 的 是 ，SVG 通常 会 被 缩放 ， 所 以 英尺 、 厘 米 等 
长 度 单位 不 一 定 符合 真实 世界 的 距离 。 它 会 受到 显示 器 的 
分 辩 率 、 浏 览 器 的 缩放 程度 ， 当 然 还 有 SVG 元 素 上 添加 的 


viewBox 或 transform 等 属性 的 影响 。 


缩放 对 所 有 单元 产生 的 影响 是 相同 的 。 通 常 每 英寸 包含 的 厘 
KE (2.54) 和 你 用 尺子 量 是 一 样 的 。 除 了 最 古老 的 浏览 器 ， 
CEPT AD bias 4, Lin 也 总 是 等 于 96px (CSS 像素 单位 )， 同 
样 也 等 于 96 个 SVG 无 单位 用 户 坐 标 值 。SVG 无 单位 坐标 通 
第 可 以 和 px 等 价 使 用 。 其 他 的 SVG 软件 同样 也 遵循 这 项 在 
CSS Values and Units Module Level 3 中 建立 的 标准 。 






























































如 果 在 你 的 SVG 中 仅仅 包含 一 个 圆 或 一 个 长 方形 的 标记 (或 其 他 任何 形状 
或 文本 ) 而 没有 其 他 的 样式 信息 ， 它 将 在 你 定义 的 尺寸 内 显示 一 个 纯 黑 色 
的 区 域 。 这 是 因为 fill 属性 的 默认 值 是 纯 黑 色 。 


fill 属性 告诉 SVG 浑 染 软件 如 何 操作 几何 形状 。 对 于 屏幕 上 的 每 一 个 像素 
(可 以 对 比 纸 上 的 每 一 个 墨 斑 )， 软 件 都 可 以 确定 该 点 是 不 是 在 形状 之 内 。 
如 果 该 点 在 形状 之 内 ， 软 件 就 会 填充 fill 的 值 ， 然 后 确定 下 一 步 怎 么 做 。 


在 简单 的 例子 (如 上 默认 黑色 ) 中 ， 填 充值 是 一 种 颜色 ， 且 形状 内 所 有 的 点 
都 用 该 颜色 替换 。 在 其 他 情况 中 ， 填 充值 可 能 是 一 个 查找 更 加 复杂 的 绘画 
代码 的 指令 。 该 指令 是 通过 引用 一 个 SVG 元 素 的 id 的 URL 来 表示 的 (一 
种 泻 当 服务， 我们 将 在 第 5 章 深入 讨论 )。 











如 果 你 不 想 让 软件 填充 形状 ， 可 以 把 fill 属性 值 设 置 为 none。 








Fill 属性 〈 以 及 stroke 属性 ) 的 最 后 一 个 可 以 设置 的 值 是 currentColor 
关键 词 。 这 一 关键 词 通常 被 估算 为 给 定 元 素 的 CSS color 属性 的 当前 值 。 
color 属性 本 身 对 SVG 没有 直接 的 影响 ， 但 是 结合 currentCotor， 它 将 有 
两 个 主要 用 途 。 


。 使 内 联 的 SVG 图 标 与 它 周 围 的 HTML 文本 颜色 协调 。color 属性 的 主要 
用 途 是 设置 CSS 样式 文本 的 颜色 。 因 此 ， 使 用 currentColor 值 的 内 联 
SVG 图 形 会 继承 周围 HTML 标记 的 文本 颜色 。 

。 为 重复 使 用 的 内 容 提供 一 个 间接 继承 的 样式 值 。 使 用 <use> 元 素 复制 的 
SVG 图 形 可 以 从 使 用 它 的 上 下 文中 继承 fill 和 stroke 等 样式 。 给 重复 
使 用 的 图 形 中 的 重要 属性 使 用 currentcolor， 这 样 可 以 通过 改变 <use> 
元 素 上 的 color 值 来 分 开 操作 复 用 图 形 的 Fill 和 stroke 的 值 。 

默认 情况 下 ，fitLL 属性 被 泻 染 为 纯色 且 不 透明 (除非 在 泻 染 服务 中 有 不 同 

的 指令 )。 可 以 通过 给 Fill-opacity 属性 设 定 值 来 调整 不 透明 度 ， 它 接受 一 

个 小 数 作为 值 : 0 到 1 之 间 的 值 会 导致 填充 值 和 背景 色 混 合 起 来 浑 染 图 形 ， 

值 为 1 (默认 值 ) 时 表示 不 透明 ， 值 为 0 时 的 效果 相当 于 设置 fill 属性 的 

值 为 none。 我 们 将 在 第 4 章 中 讨论 不 透明 度 。 


当 你 不 能 确定 图 形 的 某 一 部 分 是 在 图 形 之 内 还 是 之 外 时 ，fiLL-rute 属性 可 
以 给 计算 机 发 送 精确 的 指令 。 它 会 影响 内 部 有 洞 的 <path> 元 素 以 及 路 径 、 
多 边 形 和 纵横 交错 的 折线 。 

fill-rule 属性 有 两 个 可 选 值 。 


。 evenodd 值 的 每 一 条 边缘 线 都 分 隔 开 了 图 形 的 内 部 和 外 部 。 
nonzero 值 (默认 值 ) 是 当 你 从 头 到 尾 治 着 一 个 方向 画 交 叉 的 边线 时 企 
图 得 到 “更 多 的 内 部 空间 >” ， 并 且 只 有 你 在 图 形 内 部 沿 着 相反 方向 绘画 来 
撤销 它们 时 才 会 返回 图 形 外 部 。 
例 2-1 画 的 是 一 个 纵横 交错 的 <polygon>， 第 一 个 使 用 默认 的 nonzero 填充 
规则 ， 另 一 个 使 用 evenodd 填充 规则 。 图 2-1 显示 了 泻 染 结果 。 图 形 的 边 上 
有 细 细 的 描 边 ， 所 以 即使 你 填充 了 边线 的 两 人 出， 也 可 以 看 到 形状 。 




















































































































2-1 {FA nonzero 填充 规则 的 多 边 形 (£) 和 使 用 evenodd 填充 规则 的 多 边 形 (4) 
例 2-1 使 用 fill-rule 属性 改变 填充 区 域 


<svg xmlns="http: //www.w3.org/2000/svg" 
xmlns:xLink="http: //www.w3.org/1999/xLink" 
viewBox="0 0 400 200" width="4in" height="2in"> 
<title xml: lang="en">Fill-rule comparison</title> 
<rect fill="LightSkyBlue" height="100%" width="100%" /> (1) 


<polygon id="p" 
fill="blueViolet" stroke="navy" 
points="20,180 20,20 180,20 180,180 60,60 140,60" /> @ 
<use Xlink:href="#p" x="50%" fill-rule="evenodd" /> 
</svg> 


O 最 初 的 <svg> 元 素 建 立 了 坐标 系 ， 并 且 设 置 了 图 形 绘画 的 默认 尺寸 。 
<rect> 元 素 增 加 了 一 个 纯色 背景 。 在 这 段 简单 的 SVG 代码 中 ， 我 们 直 
接 在 表现 属性 上 设置 样式 。 

@ 最 基本 的 拥有 Fill 和 stroke 样式 的 多 边 形 ， 它 的 fiLL-rute 属性 将 继 
承 默认 的 nonzero 值 。 


O 一 个 水 平移 动 SVG 一 半 宽 度 的 同一 个 多 边 形 的 副本 。 复 制 的 多 边 形 将 
继承 在 <use> 元 素 上 设置 的 fill-rule 的 值 evenodd. 

无 论 边 线 或 者 子路 径 相互 交 叉 多 少 次 ， 每 个 点 不 是 在 图 形 内 部 就 是 在 图 形 

外 部 。 每 个 区 域 不 会 因为 它 在 两 个 不 同 的 子路 径 内 而 被 绘画 两 次 。 当 使 用 

纯色 填充 时 这 点 差别 看 似 没 有 多 大 意义 ， 但 使 用 部 分 透明 来 填充 时 它 就 变 

得 非常 重要 。 











聚焦 未 来 

未 来 的 填充 
本 节 讨 论 的 Fill 属性 都 是 基于 当前 已 经 发 布 的 稳定 的 SVG 1.1 规范 。 在 制 
定 中 的 SVG 2 规范 将 提供 更 加 灵活 的 方式 去 填充 图 形 ， 尤 其 值得 关注 的 是 
允许 单个 图 形 拥 有 多 个 填充 层 。 这 些 被 提 及 的 特性 将 在 本 书 其 他 部 分 作 更 
详细 的 讨论 ， 同 样 也 是 在 这 样 的 “聚焦 未 来 ”附注 栏 中 。 


SVG 中 的 每 个 图 形 和 文本 都 可 以 被 填充 ， 且 默认 是 填充 的 。 这 包括 不 闭合 
的 <path> 元 素 和 <polyline> 元 素 ， 它 们 可 以 定义 一 个 结束 点 不 与 起 始点 
相连 的 图 形 。 这 些 图 形 会 创建 一 个 结束 点 和 起 始点 用 直线 相连 的 填充 区 域 。 
如 果 在 结束 时 与 其 他 的 边 有 交叉 ，fiLL-rute 属性 就 会 计算 并 应 用 。 









































<path> 中 没有 闭合 的 片段 是 通过 连接 到 子路 径 的 初始 点 来 闭 
合 的 : 最 后 的 点 是 通过 一 个 move-to 命令 创建 的 。 

















即使 是 一 个 <Line> 元 素 严 格 来 说 也 是 默认 填充 的 : 因为 连接 终点 与 起 始点 
的 返回 线 与 原 线 完全 重合 ， 所 以 最 后 的 形状 不 包括 任何 区 域 。 形 状 内 是 没 
有 点 的 ， 所 以 没有 点 被 填充 值 影响 。 如 果 你 想 看 到 它 ， 就 得 给 它 加 stroke. 


2.2 ”使 用 stroke 属 性 描 边 


在 计算 机 图 形 中 ， 给 形状 描 边 的 意思 是 指 沿 着 它 的 边 画 一 条 线 。 不 同 的 程 
序 对 描 边 的 含义 会 有 不 同 的 解析 。 

在 SVG 中 (目前 如 此 )， 描 边 的 实现 方式 是 沿 着 主 形状 的 边线 向 内 和 向 外 
延伸 出 辅助 形状 。 该 描 边区 域 使 用 与 填充 主 形状 相同 的 方式 来 泻 染 : 软件 
会 依次 扫描 并 确定 某 个 点 是 否 在 描 边 区 域 的 内 部 。 如 果 在 ， 软 件 就 会 使 用 
stroke 属性 设置 的 泻 染指 令 来 设置 颜色 。 





























描 边 形状 的 每 个 部 分 都 只 会 绘制 一 次 ， 无 论 形状 中 是 否 存 在 
不 同 边 重合 或 交 又 的 部 分 。 





stroke 的 默认 值 是 none， 即 不 演 染 描 边区 域 。 就 像 fiLL 属性 一 样 ， 它 的 值 
还 可 以 是 色 值 或 演 染 服务 元 素 的 引用 。 
就 像 fill-opacity 属性 会 改变 Fill 的 效果 一 样 ， 描 边 同样 也 有 stroke- 
opacity 属性 来 改变 它 的 效果 。 第 4 章 会 详细 讨论 fill-opacity 和 stroke- 
opacity 属性 。 
还 有 许多 与 描 边 相关 的 属性 ， 本 书 不 准备 用 大 量 篇 幅 去 讨论 它们 。 但 需要 
知道 ， 它 们 可 以 控制 描 边 区 域 的 几何 形状 。 以 下 是 这 些 属 性 的 大 致 介绍 。 
stroke-width 
描 边 宽度 ， 即 描 边 的 粗细 。 其 值 可 以 是 长 度 值 、 用 户 单位 数 或 者 坐标 系 
宽 和 高 的 加 权 百 分 比 。 在 SVG 1.1 中 ， 描 边区 域 通常 以 形状 的 边 为 中 心 ， 
所 以 描 边 的 一 半 宽 度 在 形状 之 内 ， 一 半 在 形状 之 外 。 
stroke-linecap 
该 属性 用 来 给 未 闭合 的 路 径 或 线条 设置 描 边 样式 。 其 默认 值 butt 会 紧密 
修剪 摘 边 并 且 与 端点 垂直 。 其 他 选项 (round 和 square) 会 以 特定 形状 
( 即 分 别 以 半圆 形 和 方形 ) 使 用 一 半 的 描 边 宽度 来 延伸 描 边 。 
stroke-linejoin 
该 属性 用 于 指定 在 形状 中 拐角 的 描 边 样式 。 其 默认 值 miter 在 直线 上 延 
描 边 ， 直 到 两 条 边 在 某 一 点 相 汇 。 其 他 可 选 值 是 round (使 用 圆 弧 来 
连接 两 条 描 边 ) 和 bevel (使 用 一 根 额外 的 直线 连接 两 条 描 边 )。 
stroke-miterlimit 
延伸 斜 接线 可 以 超出 形状 边线 的 最 大 距离 ， 是 描 边 宽度 的 倍数 (默认 
是 宽度 的 四 倍 )。 如 果 描 边 在 这 个 距离 之 内 没有 汇合 ， 则 使 用 stroke- 
Linejoin 值 为 bevel 时 的 效果 。 
stroke-dasharray 
定义 给 形状 间断 描 边 时 的 距离 模式 ( 线 和 间隔 )。 其 默认 值 none 会 给 
整个 形状 添加 连续 的 描 边 。 每 一 条 线 的 端点 都 受 stroke-Linecap {HAY 
影响 。 
stroke-dashoffset 
定义 间断 描 边 时 起 始 偏 移 的 距离 。 默 认 值 是 0。 
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2-2: 描 边 形状 变化 的 折线 。 从 左 到 右 ，stroke-Linejoin 属性 值 分 别 为 round、 
bevel 和 miter。 从 上 到 下 ，stroke-Linecap 属性 值 分 别 为 round、butt 和 
square。 最 后 一 行 ， stroke-Linecap 属性 值 为 square A stroke-width 更 粗 


例 2-2 在 同样 的 折线 上 混合 搭配 使 用 不 同 的 stroke-Linejotn 和 stroke- 
Linecap 属性 值 ， 生 成 的 结果 如 图 2-2 所 示 。 





例 2-2 控制 描 边区 域 的 几何 形状 
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" 
viewBox="0 0 400 400" width="4in" height="4in" 
xml: Lang="en"> 
<title>Stroke join and cap styles compared</title> 
<style type="text/css"> 
.backdrop { 1) 








12 | #22 


5 2 


fill: peachPuff; 


} 

.Shapes { 
fill: none; 
stroke: indigo; 
stroke-width: 8px; 

} 


-join-round { 
stroke-Linejoin: round; 
} 


.join-beveL { 
stroke-Linejoin: bevel; 

} 

-join-miter { 
stroke-Linejoin: miter; 
stroke-miterlimit: 10; 

} 

-cap-round { 
stroke-Linecap: round; 


} 

-cap-butt { 
stroke-linecap: butt; 

} 


.cap-square { 
stroke-linecap: square; 
} 
.wider { 
stroke-width: 14px; 
} 
</style> 
<defs> 
<polyline id="p2" 
points="20,20 20,80 100,80 40,20 100,20" /> @ 
</defs> 
<rect class="backdrop" height="100%" width="100%" /> 


<g class="shapes"> 
<g class="cap-round"> 
<title>Round line caps</title> 
<g id="row"> © 
<use xlink:href="#p2" x="0" class="join-round"> 
<title>Round line joins</title> 
</use> 
<use Xlink:href="#p2" x="35%" class="join-bevel"> 
<title>Beveled line joins</title> 
</use> 
<use xlink:href="#p2" x="70%" class="join-miter"> 
<title>Mitered line joins</title> 





</use> 
</g> 
</g> 
<g class="cap-butt"> (4) 
<title>Butt (cropped) line caps</title> 
<use xlink:href="#row" y="25%" /> 
</g> 
<g class="cap-square"> 
<title>Square line caps</title> 
<use Xlink:href="#row" y="50%" /> 
</g> 
<g class="cap-square wider"> O 
<title>Square line caps with a wider stroke</title> 
<use xlink:href="#row" y="75%" /> 
</g> 
</g> 
</svg> 


O 在 这 个 更 加 复杂 的 例子 中 ， 使 用 CSS 规则 的 样式 块根 据 它们 的 类 来 给 元 
素 设 置 ftLL 和 stroke 属性 值 。 

O 在 <defs> 部 分 里 预先 定义 基本 的 <polyline> 形状 。 

© 复制 三 份 折线 并 将 其 排列 到 对 比 网 格 的 一 行 中 。 每 一 个 都 有 不 同 的 
stroke-Linejoin 样式 。 

O 复制 一 整 行 并 垂直 移动 ， 每 次 都 分 配 一 个 新 的 stroke-Linecap 样式 。 

O 最 后 一 行 继承 了 不 同 的 stroke-width 值 。 

与 填充 不 同 的 是 ， 描 边区 域 会 受到 未 闭合 路 径 的 影响 。 给 <polyline> 元 素 

和 设置 相同 点 的 <polygon> 元 素描 边 看 起 来 是 不 一 样 的 。 使 用 z 命令 闭合 的 


<path> 元 素 (或 其 子路 径 ) 会 有 一 条 线 连接 终点 和 起 始点 ， 而 开放 的 子路 
径 的 起 始点 和 终点 都 是 端点 。 








聚焦 未 来 
下 一 代 描 边 
描 边 属性 在 SVG 2 中 也 将 有 所 改变 ， 它 将 允许 每 个 形状 有 多 个 描 边 层 。 许 
多 关于 更 好 地 控制 描 边 几何 形状 的 提案 也 正在 被 考虑 ， 它 们 将 在 一 个 单独 
的 SVG 描 边 模块 上 进行 开发 。 





2.3 ERAMA 


当 一 个 图 形 同 时 拥有 填充 属性 和 描 边 属性 时 ， 描 边区 域 和 填充 区 域 会 有 一 
部 分 重合 的 地 方 ， 因 此 重合 部 分 会 有 两 种 特定 的 颜色 。 在 所 有 的 SVG 中 ， 
画家 模型 都 适用 : 如 果 两 种 颜色 都 是 不 透明 的 ， 则 上 层 的 颜色 将 会 替换 下 
层 的 颜色 。 


但 是 哪 一 层 是 在 “上 面 ”的 呢 ? 


默认 情况 下 ， 描 边 是 泻 染 在 填充 层 之 上 的 。 这 意味 着 你 通常 可 以 看 到 整个 
描 边 宽度 ， 也 意味 着 如 果 描 边 是 半 透 明 的 话 ， 将 显示 出 两 种 颜色 。 填 充 的 
颜色 将 会 出 现在 描 边区 域内 部 一 半 之 下 而 不 是 外 部 一 半 之 下 。 






































描 边 标 记 一 一 自 定义 形状 拐角 显示 的 标 ; 是 在 填充 和 描 


去 一 一 
边 之 后 泻 染 的 ， 按 照 路 径 从 头 到 尾 的 顺序 。 





在 SVG 1.1 中 ， 在 把 描 边区 域 放 到 填充 区 域 下 的 唯一 方式 是 分 成 两 个 形状 : 
一 个 仅仅 描 边 ， 然 后 把 相同 的 图 形 复制 到 同一 位 置 〈 使 用 <use> 元 素 ) 并 
仅 填 充 不 描 边 。 
<g stroke="blue" fill="red"> 
<g fill="none"> 
<path id="shape" d="..." /> 
</g> 
<use xlink:href="#shape" stroke="none" /> 
</g> 
前 面 的 代码 片段 使 用 了 大 量 继承 的 样式 。<path> 本 身 没有 设置 任何 的 fill 
和 stroke 属性 ， 而 是 从 它 的 外 层 继承 的 。 总 的 stroke 和 fill 属性 设置 在 
外 层 的 <g> 元 素 上 ， 之 后 在 垦 套 的 组 和 <use> 元 素 上 分 别 抵消 了 fitl 属性 
和 stroke 属性 。 


SVG 2 中 引入 了 paint-order 属性 ， 使 得 这 样 的 效果 更 容易 实现 。 它 使 用 空 
格 分 隔 的 关键 词 (stroke, fill 以 及 markers) 列表 来 指示 图 形 的 各 部 分 被 
泻 染 的 顺序 。 所 以 可 以 用 单个 元 素 实 现 相 同 的 效果 : 


<path id="shape" d="..." stroke="blue" fill="red" 
paint-order="stroke fill" /> 


你 在 paint-order 属性 中 没有 定义 的 泻 染 层 将 会 在 之 后 泻 当 (本 例 中 的 






























































markers), JFR CURRIE. ERR AUER PAB Ae fill 和 
stroke 的 顺序 ， 仅 需要 定义 stroke 就 可 以 了 。 
<path id="shape" d="..." stroke="blue" fill="red" 
paint-order="stroke" /> 
stroke 将 会 最 先 被 演 染 ， 然 后 是 ftLL， 最 后 是 markers。 整 个 填充 区 域 将 
始终 可 见 ， 即 使 是 与 描 边 重合 的 地 方 。 
paint-order 的 默认 值 (等 于 fill stroke markers) 可 以 用 normal 关键 词 
显 式 地 设置 。 
在 编写 本 书 的 时 候 ，paint-order 属性 在 最 新 的 Firefox (从 
31 版 本 开始 )、Blink (从 35 版 本 的 Chromium 开始 ) 以 及 
WebKit (从 2014 46 3 月 开始 ) 中 得 到 支持 。IE/Edge 以 及 其 
他 老 版 本 的 浏览 器 使 用 的 是 默认 的 泻 染 顺序 。 








控制 泻 染 顺序 的 能 力 在 文本 中 尤为 重要 。SVG 中 的 文本 可 以 像 形状 一 样 通 
过 描 边 来 创建 轮 廊 的 效果 。 然 而 ， 即 使 最 细 的 描 边 也 会 遮盖 字母 的 细 方 。 
通过 在 描 边 之 上 渲染 填充 区 域 (在 颜色 不 同 的 时 候 )， 你 可 以 加 强 字母 的 形 
状 并 恢复 它 的 易 读 性 。 例 2-3 使 用 paint-order 和 一 个 很 粗 的 描 边 给 标题 文 
本 加 了 一 个 清晰 的 轮廓 。 图 2-3 是 在 支持 的 浏览 器 中 显示 的 结果 。 




















2-3; 在 填充 之 下 描 边 的 Outlined 文本 
例 2-3 描 边 没有 遮 住 文本 的 细节 


<svg xmlns="http://www.w3.org/2000/svg" 

viewBox="0 0 400 80" width="4in" height="0.8in" 
xml: Lang="en"> 
<title>Outlined text, using paint-order</title> 
<rect fill="navy" height="100%" width="100%" /> 
<text x="50%" y="70" 

text-anchor="middle" 

font-size="80" 

font-family="sans-serif" 





fill="mediumBlue" 

stroke="gold" 

stroke-width="7" 

paint-order="stroke" 

>Outlined</text> 
</svg> 


如 果 完 全 依赖 paint-order 来 实现 这 种 效果 ， 那 你 的 文本 在 不 支持 的 浏览 器 
中 将 表现 得 一 塌 糊 涂 ， 如 图 2-4 所 示 。 所 以 应 该 要 有 备 选 策略 。 



































图 2-4: 使 用 默认 泻 染 顺序 描 边 的 Outlined 文本 


一 种 解决 方式 是 使 用 CSS 的 @supports 条 件 规则 来 控制 只 有 在 支持 paint- 
order 属性 时 才 添 加 轮廓 效果 。 其 他 情况 下 ， 如 果 设 有 达到 预期 的 效果 ， 就 
使 用 不 同 的 样式 来 提供 清晰 的 文本 。 


例 2-4 是 例 2-3 代码 的 一 个 变形 。 样 式 从 表现 属性 上 移 到 了 style 代码 块 
中 ， 这 样 就 可 以 使 用 CSS 的 条 件 规则 了 。 基 本 的 样式 是 在 不 能 控制 谊 染 顺 
序 的 时 候 提 供 更 细 的 描 边 ， 在 esupports 块 中 使 用 粗 的 描 边 和 paint-order 
属性 来 覆盖 基本 样式 。 


例 2-4 使 用 paint-order 属性 前 先 测试 是 否 支持 
<svg xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 400 80" width="4in" height="0.8in" 
xml: Lang="en"> 



































<title>Using @supports to adjust paint-order effects</title> 
<style type="text/css"> 
-outlined { 

text-anchor: middle; 

font-size: 80px; 

font-family: sans-serif; 

fill: mediumBlue; 

stroke: gold; 

/* fallback */ 

stroke-width: 3; 





@supports (paint-order: stroke) { 
-outlined { 
stroke-width: 7; 
paint-order: stroke; 
} 
} 
</style> 
<rect fill="navy" height="100%" width="100%" /> 
<text x="50%" y="70" class="outlined" 
>Outlined</text> 
</svg> 


在 支持 paint-order 的 浏览 器 (目前 这 些 浏 览 器 也 都 支持 @supports 规则 ) 


中 的 运行 结果 如 图 2-3 所 示 。 修 改 之 后 的 代码 在 其 他 浏览 器 中 的 运行 结果 如 
2-5 所 示 。 

















2-5; 当 不 支持 paint-order 时 给 文本 添加 更 细 的 描 边 














图 2-3 和 图 2-5 之 间 stroke-width 的 值 被 裁 掉 一 半 还 多 。 但 
是 图 2-5 中 描 边 仅仅 略微 窗 一 点 ， 这 是 因为 描 边 内 部 的 一 半 
在 填充 之 上 是 可 见 的 。 























如 果 你 不 能 接受 使 用 @supports 来 改变 展现 规则 ， 唯 一 的 替代 方案 就 是 复 
制 两 个 相同 的 元 素 ， 一 个 用 来 描 边 ， 一 个 用 来 填充 。 根 据 你 使 用 SVG 的 方 
式 以 及 对 样式 的 控制 程度 ， 必 要 时 可 以 使 用 脚本 来 控制 转换 。 由 于 paint- 
order 是 一 个 新 的 CSS 属性 ， 不 支持 它 的 浏览 器 不 会 把 它 添加 到 每 个 元 素 
的 style 属性 上 。 因 此 ， 你 可 以 检测 浏览 器 是 否 支 持 ， 并 在 需要 时 生成 额 
外 的 <use> 元 素 。 


例 2-5 中 提供 了 一 段 脚本 样 例 ， 它 通过 类 名 来 鉴定 元 素 并 在 需要 的 时 候 执行 
一 系列 操作 。 


























Gi 2-5 使 用 多 个 元 素来 模拟 paint-order 
<svg xmLns="http://www.w3.org/2000/svg" 
xmLns:XxLink="http://www.w3.org/1999/xLink" 
viewBox="0 0 400 80" width="4in" height="0.8in" 
xml: Lang="en"> 
<title>Faking paint-order with JavaScript</title> 
<style type="text/css"> 
-outlined { 

text-anchor: middle; 

font-size: 80px; 

font-family: sans-serif; 

Fill: mediumBlue; 

stroke: gold; 

stroke-width: 7; 

paint-order: stroke; 

} 

</style> 
<rect fill="navy" height="100%" width="100%" /> 
<text x="50%" y="70" class="outlined" 

>OutlLined</text> 
<script><! [CDATA[ 

(function(){ 
var NS = {svg: "http://www.w3.org/2000/svg", 
xlink: "http://www.w3.org/1999/xlink" 
E 

var index = 10000; 


var t = document.getElementsByClassName("outlined"); @ 


if ( t && 
(t[0].style["paint-order"] === undefined )){ (2) 
Array.prototype.forEach.call(t, fakeOutline) ; © 
} 


function fakeOutline(el){ 
el.id = el.id || "el-" + index++; (4) 


var g1 = document.createElementNS(NS.svg, "g"); 8 
g1.setAttribute("class", el.getAttribute("class") ); 
el.removeAttribute("class"); 
el.parentNode.insertBefore(g1, el); 


var g2 = document.createELementNS(NS.svg, "g"); O 
g2.style["fill"] = "none"; 
g2.insertBefore(el, null); 
g1.insertBefore(g2, null); 


var u = document.createElementNS(NS.svg, "use"); @ 
u.setAttributeNS(NS.xlink, "href", "#" + el.id); 
u.style["stroke"] = "none"; 





gi.insertBefore(u, null); 


} 
DO; 
]]> </script> 
</svg> 


@ 为 了 方便 在 脚本 中 访问， 用 一 个 特定 的 类 名 "outLined" 来 标示 要 修改 的 元 素 。 


O 可 以 检查 任何 元 素 (这 里 是 指 第 一 个 被 选中 的 元 素 ) 的 style 属性 ， 以 
确定 它 是 否 支 持 paint-order 属性 。 使 用 严格 相等 测试 (===) 来 区 别 空 
fA (元 素 上 没有 设置 内 联 样式 ) 和 undefined 值 (属性 名 无 法 识别 )。 


加 如果 需要 回 退 ， 就 会 在 每 一 个 有 "outlined" 类 名 的 元 素 上 调用 
fakeOutline() 方法 。 数 组 方法 forEach() 用 于 根据 需要 多 次 调用 该 方法 。 
由 于 getELementsByCLassName() 返回 的 列表 不 是 一 个 真正 的 JavaScript 数 
组 ， 所 以 不 能 使 用 t.forEach(fakeOutline). 取而代之 的 是 从 数组 原型 中 
提取 出 forEach( ) 方法 ， 并 使 用 自己 的 cal1() 方法 来 调用 。 


O fakeOutline() 方法 将 会 使 用 <use> 元 素来 复制 轮廓 元 素 ， 所 以 它 需 要 有 
一 个 有 效 的 id。 如果 它 本 身 没 有 ， 我 们 会 给 它 添加 一 个 唯一 的 随机 值 。 
O 把 元 素 的 类 复制 到 组 元 素 上 并 删除 元 素 本 身上 的 类 ， 并 用 组 元 素 替 换 原 
元 素 。 当 然 ， 这 要 求 所 有 填充 和 描 边 样式 都 定义 到 类 上 ， 而 不 是 通过 标 
签名 定义 或 通过 表现 属性 添加 。insertBefore() 方法 用 于 保证 新 的 组 元 

RE DOM 树 中 的 位 置 和 它 替换 的 元 素 相同 。 


O 级 套 的 组 元 素 是 用 于 保持 原 元 素 的 样式 ， 防 止 它 继承 填充 样式 。 

O 最 后 使 用 <use> 来 复制 元 素 ， 但 是 要 取消 描 边 样式 而 只 继承 填充 样式 。 
把 它 插入 到 主要 组 元 素 的 最 后 (在 null 之 前 )， 这 样 它 就 会 在 没有 填充 
样式 版 本 的 元 素 之 上 绘制 。 

脚本 运行 (在 不 支持 paint-order 的 浏览 器 上 ) 的 结果 如 图 2-6 所 示 。 虽 然 

它 看 起 来 和 图 2-3 一 样 ， 但 是 它 底层 的 DOM 结构 更 加 复杂 。 



























































2-6: 复制 文本 来 模拟 先 描 边 的 渲染 顺序 
如 你 所 见 ， 使 用 脚本 来 实现 这 样 一 个 简单 的 效果 是 很 麻烦 的 。 而 创建 一 个 























20 | 第 2 章 








通用 的 回 退 脚本 一 一 一 个 完整 的 属性 降级 方案 一 一 更 加 困难 ， 因 为 你 需要 
考虑 样式 属性 应 用 在 元 素 上 的 所 有 不 同方 式 。 实 际 上 ， 你 需要 重建 CSS 解 
析 器 的 工作 ， 识 别 所 有 的 样式 规则 并 丢弃 无 效 的 规则 。 


更 多 时 候 ， 如 果 最 终 的 效果 在 所 有 的 浏览 器 上 都 必 不 可 少 ， 则 在 你 的 标记 
中 创建 层级 的 描 边 和 填充 对 象 ， 直 接 创建 之 前 由 脚本 生成 的 结构 ， 这 样 更 
容易 。 
<g class="outlined"> 
<g style="fill: none;"> 
<text id="el-10000" x="50%" y="70">Outlined</text> 


</g> 
<use style="stroke: none;" xlink:href="#el-10000" /> 


</g> 
无 论 是 硬 编码 标记 还 是 由 脚本 动态 生成 标记 ， 在 文档 中 其 他 活跃 的 脚本 中 
都 必须 考虑 复杂 的 DOM 结构 。 























聚焦 未 来 
使 用 z-index 来 控制 排序 

当 不 同 的 形状 (或 其 他 内 容 ) LAHJA, GERVAHRAA: 形状 是 一 

个 一 个 被 泻 染 的 ， 最 后 泻 染 的 形状 将 会 在 顶部 。 

SVG 文档 中 的 层级 是 按照 代码 中 元 素 定 义 的 顺序 排列 的 : 形状 、 文 本 和 图 

片 者 会 按照 标记 定义 的 确切 顺序 来 分 层 。 在 SVG LIP, KER BRM 

序 的 唯一 方式 是 改变 元 素 在 DOM 中 的 顺序 。 

这 样 做 有 两 个 主要 问题 。 

。 它 会 迫使 你 打破 内 容 在 逻辑 上 的 分 组 。 例如， 如 果 不 使 用 <g> 元 素来 把 
文本 和 它 描 述 的 图 形 分 组 ， 你 通常 需要 把 文本 标记 移 到 文件 的 最 后 ， 这 
样 才 不 会 被 其 他 形状 遮挡 。 

。 你 不 能 通过 使 用 SMIL 或 CSS 动画 来 改变 看 到 的 层级 。 你 必须 通过 
JavaScript 来 操作 DOM， 这 可 能 会 带 来 性 能 问题 或 中 断 用 户 输入 的 焦点 。 

相 比 之 下 ，CSS (从 第 二 版 开始 ) 使 用 了 z-index 属性 来 布局 。 在 相同 的 

CSS 布局 层 司 上 下 文中 的 重合 元 素 (由 于 固定 或 相对 定位 或 者 负 的 外 边 距 

导致 ) 从 下 至 上 是 根据 z-index 属性 的 值 来 排序 的 。 确 切 的 属性 值 并 不 重 

要 ， 重 要 的 是 排列 的 顺序 。 

SVG 2 中 采用 z-index 来 重 排 SVG 的 层级 。 它 的 默认 值 是 0， 我们 可 以 给 





它 设 置 一 个 正 值 来 把 该 元 素 放 到 其 他 图 形 前 面 ， 或 者 设置 负 值 来 把 该 元 素 
放 到 后 面 。 


本 书写 作 时 ， 还 没有 主流 的 浏览 器 实现 SVG 元 素 的 z-index 
栈 。 


当 某 些 样 式 应 用 在 父 元 素 上 时 ，z-index 重 排 元 素 的 能 力 会 受到 限制 。 滤 
镜 、 遮 唱 以 及 不 透明 度 的 值 小 于 1， 都 会 导致 子 内 容 被 压 入 一 个 单独 的 栈 
中 ， 它 们 将 作为 一 个 整体 来 布局 。 


不 同 于 CSS 布局 ， 在 SVG 中 二 维 坐 标 系 的 转换 不 会 创建 一 
个 新 的 层 合 上 下 文 。 这 说 明 实际 上 变换 是 SVG 布局 中 很 正 


常 的 一 部 分 。 


使 用 JavaScript 来 取代 z-index 的 功能 需要 一 个 复杂 的 polyfill 库 ， 它 需要 扫 
描 所 有 样式 表 并 计算 每 个 元 素 最 终 的 层 登 值 。 导 致 事情 更 加 复杂 的 是 : 因为 
大 多 数 浏览 器 支持 CSS 布局 控制 的 z-index 属性 ， 所 以 你 不 能 使 用 @supports 
或 简单 的 JavaScript 检查 来 确定 它 是 否 支持 SVG 的 z-index。 


即使 有 这 样 可 运行 的 脚本 ， 你 也 无 法 取代 z-index 最 重要 的 好 处 : 将 DOM 
的 逻辑 组 织 结构 与 泻 染 顺序 分 离 。 你 的 标记 可 能 是 按照 逻辑 顺序 写 的， 但 
是 如 果 你 使 用 脚本 把 它 重 排 ， 乱 序 的 版 本 将 被 辅助 工具 (比如 屏幕 阅读 器 ) 
使 用 ， 或 在 复制 粘贴 文 本 时 使 用 。 

遗憾 的 是 ， 目 前 最 好 的 做 法 依然 是 按照 你 想 要 的 元 素 泻 染 顺 序 来 组 织 代码 。 
对 于 屏幕 阅读 器 ， 你 可 以 使 用 ARIA 属性 来 指定 逻辑 分 组 以 及 元 素 的 顺序 : 
用 aria-owns 来 创建 一 个 虚拟 的 父子 关系 ， 用 aria-flowto 来 定义 阅读 顺 
序 。 动 态 改变 交互 元 素 的 演 染 顺序 还 是 很 可 能 导致 用 户 输入 焦点 的 问题 。 


2 Sito = 

24 使 用 温 染 提示 属性 

样式 属性 的 最 后 一 课 有 助 于 你 控制 浏览 器 如 何 把 浑 染 数据 运用 在 图 形 上 。 
在 此 之 后 ， 本 书 的 其 他 部 分 将 重点 关注 你 在 这 些 形状 中 画 什 么 。 


这 些 最 后 的 属性 被 认为 是 你 (SVG 的 作者 ) 给 浏览 器 或 其 他 把 代码 转换 成 
有 色 像 素 的 软件 的 提示 。 当 浏览 器 必须 以 某 种 方式 牺牲 性 能 或 展现 时 ， 它 
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们 将 告诉 浏览 器 或 软件 哪个 属性 是 你 认为 最 重要 的 。 这 样 属性 或 多 或 少 会 
有 一 致 的 影响 。 
shape-rendering 
浏览 器 在 屏幕 分 状 率 的 限制 范围 内 应 该 如 何 调整 形状 的 边缘 。 它 有 四 个 
可 选 的 值 。 
e auto。 上 默认 值 。 这 告诉 浏览 器 选择 最 佳 的 优化 方式 。 
e optimizeSpeed。 这 告诉 浏览 器 快速 泻 染 是 最 重要 的 特性 (可 能 因为 图 
形 正 在 执行 动画 )， 图 形 的 边缘 可 能 不 会 被 精确 地 绘制 。 不 过 ， 细 微 
的 变化 可 能 因 浏 览 器 而 不 同 ， 但 大 部 分 情况 下 它 和 auto 的 效果 是 相 
同 的 。 
。 crispEdges。 这 告诉 浏览 器 应 该 把 填充 和 描 边 区 域 边缘 的 对 比 度 最 大 
化 ， 这 通常 意味 着 边缘 会 在 最 近 的 像素 的 边界 形成 锯 类 ， 而 不 是 对 边 
缘 像素 部 分 着 色 (RBH). MPRA ACL, OBIE A 
利 清晰 的 图 像 ， 但 是 对 于 曲线 或 斜 线 ， 结 果 往 往 不 大 令 人 满意 。 
e geometricpPrecisiton。 这 告诉 训 览 器 应 该 尽 可 能 精确 地 绘制 形状 ， 如 
果 需 要 可 能 会 使 用 反 饮 齿 模 式 。 


(a eae 







































































图 2-7: shape-rendering 属性 在 一 条 描 边 很 细 的 路 径 上 的 效果 : crispEdges (E) 


和 geometricPrecision (F) 


2-7 对 比 了 crispEdges 和 geometricPrecision 属性 值 应 用 在 直线 和 曲 
线 上 的 效果 。 每 个 图 形 都 是 由 一 条 描 边 宽度 为 1 像素 的 路 径 组 成 的 。 值 为 
crispEdges 上 时， 直线 的 边缘 是 锐利 且 干 净利 落 的 ， 但 不 均匀 :由 于 线条 的 
精确 位 置 不 同 ， 导 致 描 边 的 宽度 在 一 个 或 两 个 全 屏幕 像素 上 下 浮动 (最 罕 
的 时 候 可 能 什么 都 没有 )， 曲 线 会 被 分 割 为 尖锐 的 一 小 段 一 小 段 。 相 比 之 
下 ， 使 用 geometricPrecision 绘制 的 时 候 ， 路 径 上 的 每 一 个 点 会 分 配 到 等 























量 的 颜色 ， 如 果 需 要 的 话 ， 颜 色 还 可 能 占据 多 个 设备 像素 来 进行 模糊 处 理 。 
text-rendering 
浏览 器 应 该 如 何 调 整 文本 中 字母 的 形状 以 及 位 置 。 它 也 有 四 个 可 选 值 。 


e auto (默认 值 )。 
。 optimizeSpeed, 在 大 多 数 浏 览 器 中 效果 和 auto 相同 。 对 于 较 大 的 文本 ， 
可 能 会 关闭 文本 布局 调整 (对 于 大 于 20 像素 的 文本 ，Firefox 默认 使 
用 易 读 性 调整 )。 
e optimizeLegibility， 这 告诉 浏览 器 应 该 尽 可 能 地 调整 单个 字母 的 泻 
染 以 及 文本 字符 串 的 布局 来 使 其 更 易于 阅读 。 实 践 中 ， 一 些 浏览 器 把 
它 当 作 扩 大 字母 间距 以 及 字体 文件 中 指定 的 不 必要 连 字 的 上 暗示。 
e geometricprecision， 这 告诉 浏览 器 应 该 把 字母 当 作 几 何 形 状 来 精确 
地 绘制 ， 而 不 会 根据 基于 分 辩 率 的 字体 提示 来 调整 。 
在 SVG 1.1 中 ,没有 明确 定义 text-rendering 的 确切 影响 。 它 不 是 一 致 地 
为 SVG 文本 而 实现 的 ， 但 是 该 属性 被 一 些 浏览 器 用 于 控制 韭 SVG 内 容 的 
字 距 和 连 字 。 
不 同 选项 值 的 确切 影响 可 能 在 未 来 的 规范 (SVG 2 或 CSS 模块 ) 中 加 以 说 
HH, font-variant-ligatures 和 font-kerning 等 属性 的 引入 应 该 有 助 于 从 
泻 染 质量 上 区 分 这 些 特 征 (虽然 使 用 optimizeSpeed 演 染 可 能 依然 会 导致 这 
些 设置 被 忽略 )。 图 2-8 显示 了 在 Windows 电脑 上 在 Firefox 39 中 给 常见 的 
系统 字体 设置 不 同 值 的 效果 ，optimizeSpeed 和 optimizeLegibility 的 效果 
看 起 来 一 样 ， 但 在 小 号 字体 中 明显 与 geometricprecision 演 染 的 结果 不 同 。 




































































Dptimized SVG Text Optimized SVG Text 
imid SVG Text Optimized SVG Text 
Optimized SVG Text Optimized SVG Text 
Optimized SVG Text Optimized SVG Text 
Optimized SVG Text Optimized SVG Text 
Optimized SVG Text Optimized SVG Text 
Optimized SVG Text Optimized SVG Text 
Optimized SVG Text Optimized SVG Text 
Optimized SVG Text Optimized SVG Text 


Optimized SVG Text Optimized SVG Text 
Optimized SVGText Optimized SVG Text 
Optimized SVG Text Optimized SVG Text 











2-8: 给 不 同 字号 的 Times New Roman (7) 40 Verdana-system fonts (4) 两 种 
字体 设置 text-rendering 属性 值 的 效果 。 从 上 到 下 依次 为 optimizeSpeed、 


optimizeLegibility, geometricPrecision 
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color-rendering 
浏览 器 在 计算 颜色 时 应 该 精确 到 什么 程度 ， 尤 其 在 使 用 混合 元 素 和 产生 
渐变 上 时。 标准 的 提示 关键 词 有 如 下 儿 个 选项 : 


e auto 











e optimizeSpeed 
。 optimizeQuality 


训 览 器 目前 不 会 响应 该 属性 设置 的 任何 行为 。 
image-rendering 


当 图 片 显 示 的 大 小 和 图 片 文件 本 身 定义 的 像素 大 小 不 完全 相同 时 ， 浏 
览 器 应 该 如 何 计 算 来 展现 光栅 图 片 。 在 SVG 1.1 中 ， 可 选 的 标准 值 有 
auto, optimizeSpeed 和 optimizeQuality。 然 而 在 实践 中 ， 很 明显 ， 对 
于 创建 一 个 “高 质量 ”缩放 图 片 的 方法 并 不 总 是 一 致 的 。 在 图 片 包含 尖 
锐 的 边缘 时 ， 处 理 相片 的 最 佳 算法 可 以 创建 毛 玻 璃 效果 。 


在 CSS Image Values and Replaced Content Module Level 3 中 已 经 接受 了 
image-rendering 属性 ， 但 废弃 了 optimizeSpeed 和 optimizeQuality 两 
个 属性 值 。optimizespeed 属性 被 一 个 像素 化 的 值 (每 一 个 像素 都 缩放 为 
一 个 正方 形 ) 替换 。 此 外 还 增加 了 crisp-edges 选项 ， 用 于 让 边缘 更 加 
平滑 并 维持 高 对 比 度 。 
在 编写 本 书 之 时 ， 推 荐 使 用 optimizeQuality Vee it thi A HR, 在 
现 有 的 浏览 器 中 它 被 默认 的 auto 值 履 盖 。 目 前 正在 讨论 设置 一 个 单独 的 
smooth 属性 ， 来 和 auto 属性 加 以 区 分 。 
一 组 不 同 但 有 关 的 属性 集 被 称 为 颜色 插值 指令 ， 我 们 将 在 第 3 章 中 深入 
讨论 。 颜 色 插 值 的 设置 不 (应 该 ) 是 建议 而 是 必要 的 。 但 是 ， 给 color- 
rendering 设置 optimizeSpeed 值 时 ， 如 果 它 减缓 了 泻 染 速度 ， 浏 览 器 可 以 
忽略 颜色 插值 模式 。 在 实践 中 ， 对 颜色 插值 选项 的 支持 程度 较 低 ， 导 致 这 
个 区 别 是 无 关 紧 要 的 。 
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创建 颜色 





本 章 我 们 将 更 加 深入 地 研究 使 用 纯色 来 填充 图 形 时 可 以 选用 的 值 有 哪些 。 首 
先 概述 颜色 在 Web 上 的 工作 原理 ， 然 后 描述 在 Web 上 定义 颜色 的 不 同方 式 : 
从 非常 可 读 (但 不 是 很 合理 ) 的 颜色 关键 词 ， 到 RGB 和 HSL 颜色 函数 。 

我 们 将 在 第 4 章 中 讨论 部 分 透明 颜色 ， 作 为 颜色 基础 知识 的 一 个 补充 。 颜 
色 的 概念 也 是 从 第 6 章 将 要 开始 介绍 的 颜色 渐变 的 一 个 必要 前 提 。 


3.1 ”使 用 名 称 生成 腾 肋 玫瑰 红 


当代 码 是 写 给 他 人 看 (例如 本 书 中 的 例子 ) 时 ,使 用 人 类 可 读 的 颜色 名 是 
非常 好 的 做 法 ， 比 如 red. gold 和 aquamarine 等 。 

如 果 计 算 机 也 可 以 识别 这 些 颜 色 名 那 就 再 好 不 过 了 。 值 得 高 兴 的 是 ， 在 
SVG 中 是 可 以 做 到 的 。Web 浏览 器 和 SVG 编辑 器 都 可 以 理解 red, gold 
和 aquamarine 的 含义 。 它 们 甚至 还 能 识别 更 加 稀奇 古怪 的 名 字 ， 比 如 
mistyRose, peachPuff 和 mediumSeaGreen。 

这 些 名 字 是 怎么 来 的 呢 ? 它们 有 两 个 来 源 : 在 早期 的 HTML 和 CSS 版 本 
中 引入 的 简单 的 颜色 关键 词 集 ， 以 及 从 Unix 电脑 X11 窗口 系统 中 的 SVG 
(以 及 后 来 的 CSS) 开始 使 用 的 更 广泛 的 关键 词 集 。' 两 种 关键 词 集 在 所 有 




































































注 1: 如 果 你 对 这 些 关键 词 如 何 最 终 成 为 X11 首要 标准 感 兴趣 ，Alex Sexton 从 以 前 的 Unix 
论坛 中 挖掘 了 相关 历史 。 你 可 以 在 线 观 看 他 在 2014 年 CSSConf 上 的 演讲 “Peachpuffs 
and Lemon Chiffons” (https://www.youtube.com/watch?v=HmStJQzclHc) 。 
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主流 的 SVG AAA PA. UES, EME AT DAZE ra EE Ta a F 
(最 古老 的 除外 ) 的 其 他 CSS 属性 中 使 用 。 

它们 对 于 用 户 是 友好 的 ， 但 关键 词 系 统 也 有 许多 限制 。 

首先 ， 这 147 个 关键 词 只 能 描述 现代 电脑 显示 器 可 以 显示 的 数 百 万 种 颜色 
中 的 一 小 部 分 。 

这 些 关键 词 的 选择 也 有 一 些 不 一 致 和 随意 的 情况 。 最 初 的 网 页 中 的 颜色 和 
X11 系统 中 的 颜色 有 时 是 冲突 的 。 颜 色 cyan (X11 中) F aqua (CSS 1 中 ) 
是 相同 的 ， 但 和 aquamarine 不 同 。 颜 色 darkGray (X11 中 ) 实际 上 比 gray 
(CSS 1 中 ) 还 浅 。 




















所 有 的 gray 关键 词 同样 也 可 以 拼写 为 grey。 这 是 一 个 特性 ， 
而 不 是 bug。 但 是 ， 一 些 老 的 浏览 器 只 支持 美式 拼写 方法 
gray， 所 以 建议 使 用 它 来 获得 更 好 的 支持 。 





X11 颜色 名 称 本 身 不 是 很 系统 ， 一 些 使 用 dark、medium 和 light 来 当 
前 级 ， 而 其 他 的 还 会 有 pale 前 级 。 这 些 变 形 不 总 是 符合 逻辑 的 ， 比 如 
darkSeaGreen 不 是 真 的 比 seaGreen, lightSeaGreen 和 mediumSeaGreen 颜色 
深 ， 而 仅仅 是 暗 一 点 。 


不 过 ， 如 果 你 很 享受 使 用 可 读 颜 色 名 称 带 来 的 便利 ， 所 有 可 以 识别 的 关键 
词 已 经 在 附录 A 中 列 出 ， 同 时 还 列 出 了 对 应 的 色 值 。 图 3-1 显示 了 颜色 按 
照 字 母 顺序 从 ALiceBule 到 yeLLowGreen 拼 起 来 的 图 片 。 


关键 词 的 名 称 和 大 多 数 CSS 关键 词 一 样 ， 是 不 区 分 大 小 写 的 。 如 果 你 觉得 
你 的 颜色 非常 强 ， 可 以 把 它们 全 部 大 写 。 大 部 分 官方 参考 文档 都 使 用 小 写 ， 
但 在 本 书 中 采用 驼峰 命名 法 (关键 词 首 字母 小 写 ， 后 续 每 个 单词 仅 首 字母 
大 写 ) 以 使 其 更 易于 阅读 。 

例 3-1 是 创建 图 3-1 效果 的 代码 。 它 使 用 XMLHttpRequest 来 加 载 一 个 单独 的 
文件 ,文件 内 容 是 按照 字母 顺序 排序 的 颜色 关键 词 列表 ， 然 后 创建 长 方形 
并 分 别 用 这 些 颜 色 填 充 。 每 个 长 方形 都 有 一 个 子 元 素 <title> 来 包含 颜色 名 
称 ， 如 果 你 在 浏览 器 中 运行 代码 ， 当 鼠标 在 色 块 上 甚 停 时 ， 它 会 像 工具 一 
样 给 你 提示 。 







































































创建 颜色 | 27 

















3-1: 所 有 可 以 用 颜色 关键 词 命名 的 颜色 





28 | 第 3 章 


例 3-1 创建 一 个 颜色 关键 词 拼图 
SVG 标记 : 


<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xLink="http: //www.w3.org/1999/xLink" 
width="400px" height="650px" 
xml: Lang="en" 
viewBox="0 0 7 21" preserveAspectRatio="none" > (1) 
<title>SVG Color Keywords</title> 


<script><! [CDATA[ 
/* script goes here */ (2) 
]]> </script> 
</svg> 


O 在 SVG 规范 中 定义 了 147 个 关键 字 (包括 不 同 拼写 的 gray) ， 恰 好 可 以 
分 布 在 7x21 的 网 格 中 。viewBox 创建 了 一 个 7 列 21 行 的 网 格 ， 并 且 使 
用 preserveAspectRadio="none" 来 使 网 格拉 伸 到 填充 整个 <svg> 元 素 。 

O 整个 图 形 是 通过 脚本 绘制 的 。 由 于 这 是 一 个 SVG 文件 ， 所 以 需要 使 用 
XML 的 <!CDATA[...]]> 块 来 包含 脚本 中 的 一 些 特殊 字符 。 

JavaScript 代码 : 





(function(){ 
var svgNS = "http://www.w3.org/2000/svg"; 
var xLinkNS = "http://www.w3.org/1999/xLink"; 
var svg = document.documentElement; 


var dataFileURL = "color-names.csv" (1) 
var request = new XMLHttpRequest(); 
request.addEventListener("load", draw); 
request.overrideMimeType("text/csv"); 

request.open( "GET", dataFileURL); 

request.send(); 


function draw() { © 
var w = 7; //swatches per row 


var colors = request.responseText.split("\n"); © 


for (var i=0, n=colors.length; i<n; i++){ 
var c = colors[i].trim(); (4) 


var swatch = document.createElementNS(svgNS, "rect"); 
swatch.setAttribute("width", 1); 
swatch.setAttribute("height", 1); 





创建 颜色 | 29 


swatch.setAttribute("x", i %w ); 
swatch.setAttribute("y", Math.floor(i / w) ); O 


swatch.style.setProperty("fill", c); (6) 


var tip = document.createElementNS(svgNS, "title"); 
tip.textContent = c; 
swatch.insertBefore(tip, null); (7) 


svg.insertBefore(swatch, null); © 


} 
DOs 


@ XMLHttpRequest 对 象 用 于 加 载 包含 颜 色 名 称 列 表 的 文件 。 事 件 监 听 器 用 
于 在 文件 加 载 完 成 时 调用 我 们 的 绘画 国 数 。MIME 类 型 "text/csv" R 
明 我 们 期 望 的 是 一 个 分 隔 的 文本 文件 ， 这 样 浏 览 器 就 不 会 尝试 把 它 当 作 
XML 文件 来 解析 。 

O dran) 国 数 在 请 求 的 文件 下 载 完 成 时 调用 。 数 据 文件 中 每 一 个 关键 词 都 
是 单独 的 一 行 。 它 是 通过 在 电子 表格 中 插入 一 列 ， 然 后 保存 为 字符 分 隔 
值 (comma-separated values，CSV) 文件 创建 的 。 


© 请 求 的 responseText 属性 用 于 把 整个 文件 作为 一 个 单独 的 JavaScript 
字符 串 。spLit(token) 方法 根据 token 把 字符 串 拆 分 为 一 个 字符 串 数 
组 一 一 本 例 中 ， 换 行 符 在 JavaScript 转 为 \n。 


O 使 用 for 循环 遍历 数组 〈 即 数据 文件 中 的 每 一 行 ) 中 的 每 个 字符 串 。 
trim() 方法 用 于 去 掉 字符 串 两 端 多 余 的 空白 。 


O 在 拉 伸 的 SVG 坐标 系 中 每 一 个 长 方形 的 宽 和 高 都 设置 为 1， 水 平和 垂直 
的 位 置 是 通过 数组 索引 和 每 行 色 块 的 个 数 来 计算 的 。 


O 使 用 关键 词 名 称 来 给 Fi 属性 设置 值 。 


O 关键 词 还 被 用 作 <title> 元 素 的 文本 内 容 ， 之 后 把 它 添加 到 每 个 <rect> 
元 素 的 子 元 素 中 来 创建 提示 工具 。 


© 最 后 ， 设 置 了 样式 的 <rect> (以 及 它 的 提示 工具 ) 被 添加 到 SVG 中 。 
从 图 3-1 中 我 们 可 以 清晰 地 看 出 ， 颜 色 关键 词 并 不 是 所 有 可 能 颜色 的 一 个 代 
表 。 除 了 重复 的 灰色 ， 还 有 许多 灰白 色 的 颜色 ， 以 及 相对 较 少 的 瞳 色调 。 
显然 ， 我 们 有 比 这 147 个 关键 词 更 多 的 可 选 值 。 想 要 完全 了 解 自 定义 颜色 
的 原理 ， 我 们 首先 要 了 解 一 点 物理 学 和 一 点 生物 学 。 
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3.2 彩虹 三 原色 


在 物理 学 中 ， 颜 色 是 表示 波 的 频率 或 者 光 的 能 级 的 一 个 属性 。 可 见 光 本 身 
是 由 更 宽 的 电磁 波谱 内 的 一 段 特定 范围 的 频率 组 成 的 。 能 量 较 低 时 ， 电 磁 
辐射 就 形成 了 无 线 电 波 ， 而 能 量 较 高 时 ， 它 就 变 成 了 X 射线 。 

光谱 是 连续 的 ， 颜 色 之 间 并 没有 明确 的 界限 ， 刚 好 是 一 条 平 谓 过 渡 的 彩虹 ， 
包含 从 红色 到 楼 色 、 黄 色 、 绿 色 、 蓝 色 、 紫 色 ， 再 到 我 们 肉眼 看 不 到 的 紫 
外 线 。 每 一 种 颜色 都 和 特定 频率 和 能 级 相关 联 。 


正如 你 可 以 调节 收音 机 的 频率 使 它 对 某 一 无 线 电 频率 敏感 一 样 ， 有 色 颜 料 
对 特定 频率 的 光 十 分 敏感 。 它 们 吸收 特定 频率 (颜色 ) 光 的 能 量 并 反射 其 
他 的 区。 同样 ， 化 学 反应 中 产生 光 是 因为 反应 释放 的 能 量 达 到 了 特定 的 频 
率 。 热 光源 还 可 以 被 调节 来 调整 颜色 。 如 果 火 焰 燃 烧 反 应 的 效率 随 不 同 燃 
料 和 氧气 水 平 不 断 增 长 ， 光 子 (每 单位 光 ) 的 能 量 也 随 之 增加 ， 并 且 颜 色 
会 从 暗 红 〈 像 烧 红 的 煤 一 样 ) 变 为 黄色 ， 最 后 变 为 明亮 的 蓝 色 (就 像 图 3-2 
显示 的 煤气 燃烧 一 样 )。 
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图 3-2: 煤气 燃烧 产生 的 蓝 色 火焰 (公共 领域 的 图 片 由 维基 共享 资源 用 户 Sapp 提供 ) 


无 线 电 台 的 频率 会 混合 ， 而 光 的 频率 不 会 。 每 个 光子 都 保持 着 它 自己 的 能 
级 和 颜色 。 你 可 以 通过 棱镜 或 者 细 雾 来 把 太阳 光 的 多 种 颜色 折射 为 彩虹 。 
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那么 为 什么 平常 我 们 看 到 的 太阳 光 是 白色 而 不 是 彩色 的 呢 ? 这 就 不 得 不 提 
到 生物 学 。 


你 的 眼睛 对 一 定 范 围 内 的 电磁 波谱 〈 我 们 称 为 可 见 光 的 部 分 ) 是 敏感 的 ， 
这 是 因为 色素 分 子 吸收 光 的 能 量 并 在 大 脑 中 将 其 转换 成 化 学 信号 。 大 多 数 
人 眼中 有 四 种 感光 色素 : 一 种 非常 敏感 但 不 是 特定 颜色 的 色素 (负责 夜 视 
和 一 些 运动 检测 )， 以 及 三 种 颜色 色素 。 每 种 颜色 色素 对 光谱 中 不 同 但 重生 
的 区 域 敏感 。 


因此 ， 我 们 的 眼睛 不 是 依据 所 有 可 能 频率 的 连续 光谱 来 识别 颜色 的 ， 而 是 
只 看 三 种 颜色 色素 分 别 吸收 了 多 少 光 ， 你 的 大 脑 会 把 这 些 信 息 转化 为 你 能 
看 到 的 所 有 颜色 。 

我 们 眼中 的 色素 通常 和 蓝 色 、 绿 色 和 红色 相关 ， 可 以 简单 描述 为 : 绿色 和 
红色 色素 同样 对 蓝光 敏感 ， 三 种 色素 都 对 中 绿色 的 光敏 感 。 另 一 种 命名 系 
统 把 它们 描述 为 S (短波 长 )、M (中 等 波长 ) 以 及 工 〈 长 波长 )， 这 是 因为 
光 的 频率 通常 由 光 的 波长 来 决定 。 

因为 光 具 有 国定 的 波 速 ， 所 以 频率 〈 每 秒 的 波 数 ) 和 波长 

( 相 邻 波 之 间 的 距离 ) 可 以 互 换 。 光 的 能 量 越 高 ， 它 的 频率 
越 快 ， 波 长 越 短 。 












































由 于 眼睛 看 到 的 颜色 是 三 种 色素 不 同 值 的 混合 ， 如 果 不 从 物理 学 角度 来 看 ， 
我 们 可 以 在 绘画 中 混合 颜色 。 图 3-3 概述 了 混合 颜色 的 原理 。 如 果 你 眼睛 看 
到 的 是 纯 黄色 的 光 ， 那 么 M 和 L 色素 同等 程度 地 被 触发 ， 而 S 色素 没有 被 
触发 。 你 的 大 脑 根据 这 些 信息 在 脑 中 构建 出 黄色 。 


如 果 你 的 眼睛 在 相同 位 置 上 看 到 的 是 亮 绿 色 和 亮 红 色 的 光 的 混合 物 ， 同 样 
的 色素 就 会 被 激活 ， 你 的 大 脑 仍 然 认为 看 到 的 是 黄色 。 


几乎 每 一 种 使 用 颜色 来 传递 信息 的 设备 ， 包 括 打印 机 和 屏幕 ， 都 利用 了 颜 
色 混 合 。 然 而 ， 打 印 机 和 屏幕 涉及 的 颜色 会 有 不 同 。 


印刷 颜料 ， 就 好 像 我 们 眼中 的 色素 一 样 ， 吸 收 特定 频率 的 光 。 当 有 色 的 墨 
水 或 涂料 吸收 部 分 照射 在 它 上 面 的 光 时 ， 它 会 从 反射 到 你 眼睛 中 的 颜色 中 
消除 它 吸 收 的 那 部 分 光 的 频率 。 当 与 其 他 颜色 混合 时 ， 其 他 颜色 吸收 的 光 
会 被 消除 。 这 被 称 为 减 色 混合 ， 也 是 你 在 幼儿 园 就 学 到 的 颜色 混合 。 黄 
色 颜 料 会 吸收 大 部 分 蓝 紫 光 ， 反 射 绿色 、 黄 色 和 红色 ， 蓝 色 颜 料 将 会 吸收 
红色 。 混 合 黄色 和 蓝 色 ， 结 果 会 吸收 红色 和 蓝 色 ， 反 射 你 所 看 到 的 绿色 。 
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图 3-3: 三 色 系统 是 如 何 欺骗 我 们 的 大 脑 的 〈 图 标 由 用 户 jhnri4、pnx 和 benoitpetit 
剪 切 自 openclipart.org) 


也 许 从 幼儿 园 开 始 你 就 记得 混合 深 色 的 颜料 会 造成 一 片 混乱 。 dpe 
印 机 会 使 用 明亮 的 颜料 ， 它 反射 的 光 会 多 于 吸收 的 光 : 青色 ( 蓝 绿色 )、 

红 〈 反 射 蓝 色 和 红色 ) 和 黄色 (反射 红色 和 绿色 )。 混 合 这 三 re 所 
有 颜色 的 光 都 会 被 吸收 ， 这 就 形成 了 墨 黑 色 ， 其 实 打 印 机 通常 会 包含 一 个 
单独 的 浓 黑 色 。 打 印 高 品质 的 图 形 会 使 用 一 i Ga mae 
Yellow 以 及 blacK) 颜色 模型 ， 它 会 使 用 四 种 墨 来 生成 每 种 颜色 。 


相 比 之 下 ， 电 脑 屏幕 会 直接 把 光照 射 到 我 们 的 眼中 。 多 种 颜色 组 合 来 增加 
进入 你 眼中 的 光 的 总 量 。 因 此 它 被 称 为 加 色 模 型 。 彩 色 显示 器 (就 像 更 早 
的 彩色 电视 一 样 ) 使 用 红色 、 绿 色 和 蓝 色 频率 的 光 来 使 你 眼中 色素 的 差异 
最 大 化 。 精 心 排列 的 红色 、 绿 色 和 蓝 色 的 光 组 成 的 每 个 像素 都 被 变换 来 在 
你 眼中 重 现 几乎 所 有 鲜 活 的 图 案 ， 就 像 自然 光 那 样 。 
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HP PR HR PAS AS Te 2,3 ht HP SE BO PE Tm], A 
些 颜 色 〈 某 种 饱和 度 的 绿色 ， 特 别 强 的 蓝 色 和 深 红 色 ) 无 法 
使 用 RGB 光 来 准确 地 表达 。 同 样 ， 彩 色 打印 方式 永远 不 能 
完全 重 现 某 些 自然 颜色 。 可 以 被 一 种 颜色 系统 表示 的 所 有 可 
能 颜色 的 范围 被 称 为 该 颜色 系统 的 色 域 。 


























数字 图 形 系 统 中 一 个 像素 里 的 每 种 颜色 的 亮度 水 平 都 有 一 个 固定 的 数值 。 
早期 的 彩色 电脑 中 ， 每 种 颜色 有 四 个 等 级 ， 一 共 包 括 64 (4x4x4) 种 颜 
色 。HTML 中 最 早 使 用 的 “网 络 安全 ”颜色 关键 词 列表 可 以 被 映射 到 64 色 
显示 器 中 。 然 而 ， 大 多 数 现代 电脑 可 以 支持 每 种 颜色 256 个 级 别 (0~255), 
超过 1600 万 种 组 合 。 这 是 在 Web 中 使 用 颜色 编码 的 基础 。 


3.3” 自 定义 颜色 
TE CSS 和 SVG 中 使 用 一 组 RGB 值 来 自 定义 颜色 有 两 种 方式 : 


函数 表示 法 ， 格 式 为 rgb(red,green,blue) 
。 十 六 进 制 表示 法 ， 格 式 为 #RRGGBB 或 #RGB 
在 函数 表示 法 中 使 用 的 值 可 以 是 0 到 255 的 整数 或 者 百分比 。 但 不 可 以 混 
合 使 用 整数 和 百分比 ， 所 有 的 值 必须 使 用 同一 种 类 型 。 
六 位 的 十 六 进 制 格式 的 值 同样 使 用 0~255 的 数字 ,但 是 必须 要 转换 成 十 六 
进 制 的 数值 。 十 六 进 制 中 ， 每 一 位 数字 可 以 表示 0 到 15 的 数值 ， 而 不 仅仅 
是 0 到 9 (hexa 是 6，deci 是 10， 所 以 十 六 进 制 是 基于 16 的 数字 系统 )。 额 
外 的 数字 通过 字母 A (10) 到 F (15) 来 表示 。 
三 位 的 十 六 进 制 格式 是 颜色 中 每 个 值 的 两 个 十 六 进 制 数字 相同 时 的 简写 。 














十 六 进 制 在 CSS 和 SVG 中 是 不 区 分 大 小 写 的 ，#ACE 和 #ace 
是 相同 的 〈 代 表 淡 蓝 色 ， 也 可 以 写成 #AACCEE)。 





如 下 的 颜色 定义 指定 了 相同 的 RGB 值 : 
rgb(102,51,153) 
rbg(40%, 20%, 60%) 

。 #663399 

。 #639 
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在 一 些 最 新 的 浏览 器 中 ， 你 还 可 以 使 用 关键 词 RebeccaPurple 
来 表示 颜色 值 #39。 将 该 名 称 添 加 于 CSS Color Module 
Level 4 中 ， 是 为 了 纪念 非常 喜欢 紫色 的 Rebecca Meyer， 她 
去 世 于 六 岁 生 日 那天 。 她 的 父亲 Eric Meyer 是 W3C CSS 工 
作 组 前 成 员 ， 并 出 版 了 很 多 有 关 CSS 的 图 书 。 它 是 SVG 1 
规范 发 布 后 添加 的 唯一 一 个 颜色 关键 词 。 





CSS Color Module Level 3 中 介绍 了 另 一 种 描述 颜色 的 方式 ， 它 基于 更 加 常见 
的 颜色 理论 而 不 是 RGB 电脑 显示 器 。 色 相 - 饱和 度 - 亮度 (hue-saturation- 
lightness, HSL) 模型 把 颜色 描述 为 “ 纯 ” 色 和 黑色 、 白 色 或 灰色 的 混合 方 
式 。 它 的 三 个 具体 值 如 下 。 
色相 
使 用 色 轮 中 的 角度 定义 的 纯色 ， 角 度 为 0 度 时 是 纯 红 色 ，60 度 时 是 纯 黄 
色 ，120 度 时 是 亮 绿 色 ，300 度 时 是 品 红色 ，360 度 时 又 回 到 了 纯 红色 。 


饱和 度 
混合 色 中 纯色 的 强度 (用 于 调整 亮度 )，0% 的 饱和 度 会 有 灰色 的 色 度 ， 
100% 的 饱和 度 是 鲜亮 的 颜色 。 

亮度 
混合 色 中 黑色 或 者 白色 的 程度 ，0% 的 亮度 是 纯 黑 色 ，1009% 的 亮度 是 纯 
白色 ， 而 50% 的 亮度 是 最 鲜艳 的 颜色 。 


与 RGB 值 不 同 ，HSL 值 通常 不 唯一 ， 不 同 的 HSL 值 可 能 组 合 出 相同 的 颜 
色 。 例 如 饱和 度 为 0% 时 ， 不 论 色 相 值 如 何 ， 永 远 显 示 灰 色 。 亮 度 为 100% 
时 ， 不 论 色 相 和 饱和 度 值 如 何 ， 永 远 显 示 白 色 。 


其 他 两 种 颜色 模型 容易 与 HSL 混淆 : 色相 - 饱和 度 - 明度 
(hue-saturation-value, HSV) 模型 和 色相 -饱和 度 -亮度 
(hue-saturation-luminance， 不 巧 ， 它 也 缩写 为 HSL) 模型 。 
色相 和 饱和 度 的 定义 是 相同 的 ， 但 第 三 个 参数 的 值 是 不 可 互 
换 的 。 如 果 你 想 匹 配 其 他 绘图 软件 中 定义 的 颜色 ， 要 确保 你 
们 使 用 的 是 相同 的 颜色 模型 。 














图 3-4 使 用 环形 色 轮 来 展现 色相 角度 和 颜色 之 间 的 关系 ， 不 同 的 半径 显示 的 
是 不 同 的 亮度 ， 每 个 单独 的 色 轮 有 着 不 同 的 饱和 度 。 
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s = 100% 











图 3-4: 色相 - 饱和 度 - 亮度 (HSL) 颜色 模型 ， 色 相 的 值 从 0 度 往 右 按 顺 时 针 方 
向 逐渐 增加 ， 亮 度 水 平 从 内 往外 分 别 为 25%、50% 和 75%; 饱和 度 的 值 如 
图 中 所 示 

最 鲜亮 的 颜色 是 在 饱和 度 为 100%、 亮 度 为 50% 的 时 候 创建 的 。 在 RGB 模 

型 中 ， 这 些 颜色 至 少 有 一 个 颜色 通道 为 100%， 一 个 颜色 通道 为 0%。 通 党 

来 说 ， 把 RGB 转换 为 HSL 时 : 


。 饱和 度 的 值 可 以 计算 为 100% 减 去 最 小 RGB 通道 占 最 大 RGB 通道 的 百 
分 比 


S = (1 - min/max) x 100% 
。 亮度 的 值 是 最 大 颜色 通道 百分比 和 最 小 颜色 通道 百分比 的 平均 值 : 
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L = (min% + max%)/2 


色相 的 值 是 由 中 间 值 与 最 大 颜色 通道 的 值 减 去 最 小 通道 的 值 的 比例 决定 


H= 60+60x([G-B]/[R-nmin])， 如 果 最 大 值 是 R 
H = 120 + 60 x ([B-R]/[G-min])， 如 果 最 大 值 是 6 


H = 240 + 60 x ([R-G]/[B-min])， 如 果 最 大 值 是 B 


该 分 数 返 回 一 个 介 于 -1 到 1 之 间 的 值 ， 这 取决 于 哪 种 颜色 的 值 最 小 ， 哪 种 
颜色 的 值 会 增加 或 减少 相对 于 主 色 通道 为 纯色 相 时 的 色相 值 。 如 果 为 红 紫 
色 ， 第 一 个 公式 会 返回 一 个 负 的 色相 和 角度， 我 们 可 以 通过 给 它 加 360 度 来 
转换 为 等 效 的 正 值 。 


当 两 个 颜色 通道 捆绑 在 一 起 (你 可 以 任意 选择 一 个 为 最 大 值 或 最 小 值 ) 的 
时 候 ， 转 换 公 式 仍 然 适用 。 但 是 当 颜 色 为 灰色 时 ， 色 相 的 值 为 undefined; 
颜色 为 黑色 时 ， 饱 和 度 的 值 为 undefined。undefined 值 会 被 设置 为 0。 


在 CSS 中 使 用 HSL 值 定 义 颜 色 时 ， 要 使 用 hsL(h,s%,1%) 国 数 。 色 相 的 值 
理论 上 是 一 个 角度 ， 但 是 我 们 在 设置 值 的 时 候 不 需要 单位 。 饱 和 度 和 亮度 
通常 用 百分数 来 表示 。 一 些 例子 如 下 : 
RBE (lime), rbg 值 为 (0%, 100%, 0%), hsl 值 为 (120, 100%, 50%) 
绿色 (green), rbg 值 为 (0%, 50%, 0%), hsl 值 为 (120, 100%, 25%) 
紫色 (purple), rbg 值 为 (50%, 0%, 50%), hsl 值 为 (300, 100%, 25%) 
RebeccaPurple &, rbg {4-4 (40%, 20%, 60%), hsl 值 为 (270, 50%, 40%) 


虽然 hsL() 颜色 函数 在 所 有 现代 浏览 器 中 都 支持 (E8 是 唯 
一 一 个 不 支持 的 常用 浏览 器 )， 但 是 一 些 编辑 、 显 示 或 者 转 
换 SVG 的 工具 可 能 不 支持 。 对 CSS3 部 分 透明 颜色 的 支持 度 
与 此 类 似 ， 我们 将 在 第 4 章 进行 讨论 。 



































例 3-2 是 创建 图 3-4 的 SVG 和 JavaScript 代码 。 它 为 每 个 彩色 的 扇形 部 分 创 
建 了 <use> 元 素 ， 并 且 使 用 style 对 象 来 给 hsl() 函数 填 值 。 每 一 块 都 是 把 
色相 值 作为 rotate() 变换 函数 的 参数 旋转 形成 的 。 


例 3-2 使 用 SVG 和 脚本 创建 一 个 HSL 色 轮 
SVG 标记 ; 


<svg xmLns="http://www.w3.org/2000/svg" 
xmlns:xlink="http: //www.w3.0rg/1999/xlink" 
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width="400px" height="400px" viewBox="0 0 200 200" > 
<title>HSL Color Wheel</title> 
<defs> (1) 
<circle id="center" r="1.5" fill="black"/> 
<path id="inner" transform="rotate(-15)" 
d="M0,0L15,0A15,15 0 © 1 12.99,7.5 LO,0Z" /> (2) 
<path id="middle" transform="rotate(-15)" 
d="M15,0L28,0A28,28 © 0 1 24.25,14 
L12.99,7.5 A15,15 © © 0 15,02" /> 
<path id="outer" transform="rotate(-15)" 
d="M28,0L40,0A40,40 0 © 1 34.64,20 
L24.25,14 A28,28 0 0 0 28,0Z" /> 
<circle id="edge" r="39" fill="none" 
stroke="white" stroke-width="2"/> 
</defs> 
<style type="text/css"> 
text { 
text-anchor: middle; 
font-size: 8px; 
font-family: sans-serif; 
} 
</style> 
<rect fill="#888" width="100%" height="100%" /> © 
<svg class="wheel" width="100" height="100" x="0" y="0" 
viewBox="-40,-40 80,80"> (4) 
<use xlink:href="#center"/> 
<use xlink:href="#edge"/> O 
</svg> 
<svg class="wheel" width="100" height="100" x 
viewBox="-40,-40 80,80"> 
<use xlink:href="#center"/> 
<use xlink:href="#edge" /> 
</svg> 
<svg Class="wheel" width="100" height="100" x 
viewBox="-40,-40 80,80"> 
<use xlink:href="#center"/> 
<use xlink:href="#edge" /> 
</svg> 
<svg class="wheel" width="100" height="100" x="0" y="100" 
viewBox="-40,-40 80,80"> 
<use xlink:href="#center"/> 
<use xlink:href="#edge"/> 
</svg> 
<script><! [CDATA[ 
/* script goes here */ 
]]> </script> 
</svg> 


"100" y="0" 


"190" y="0" 








@ 所 有 的 形状 都 预定 义 以 方便 多 次 使 用 。 它 们 被 居中 绘制 在 一 个 80 x 80 的 





坐标 系 中 ， 


每 一 个 完整 的 轮子 是 一 个 半径 为 40 的 圆 。 


O 模 形 部 分 使 用 path 标记 以 及 一 点 三 角形 学 来 创建 。 每 一 个 模 形 是 一 个 30 
度 的 部 分 ， 以 x 轴 为 中 心 。 为 了 减少 对 三 角形 学 的 依赖 ， 定 义 模 形 时 首 
先 让 它 的 一 条 边 与 x 轴 平行 ， 然 后 逆 时 针 旋转 ， 直 到 它 的 中 心 落 在 x 轴 








上 。 这 样 ， 每 个 圆 弧 的 一 个 终点 的 (wy) 坐标 可 以 定义 为 (0)， 其 中 了 为 
圆 的 半径 。 另 一 个 终点 的 坐标 可 以 表示 为 (rxX cos(30° ), rx sin(30° )), 它 
相当 于 (r x 0.866, r x 0.5)。 


© 使 用 以 50% 的 灰色 (#888) 填充 的 长 方形 给 图 片 提供 背景 。 

O 每 一 个 色 轮 都 使 用 一 个 <svg> 元 素来 定义 ， 它 的 位 置 在 图 片 内 部 ， 并 且 
使 用 viewBox 属性 来 确保 它 以 坐标 系 的 原点 为 中 心 、 大 小 为 80 x 80。 

O 每 一 个 <svg> 都 包含 一 个 黑色 的 中 心 点 以 及 轮子 白色 的 边缘 ， 它 们 都 不 
需要 任何 特殊 的 计算 。 


JavaScript: 








(function(){ 


var 
var 


var 
var 
var 


var 


var 
for 


} 
HNO; 


svgNS = "http://www.w3.org/2000/svg"; 
xLinkNS = "http: //www.w3.org/1999/xLink"; 


wedge = 30; //angle span of each pie piece, in degrees 
saturation = ["100%", "75%", "50%", "25%" ]; 
lightness = {outer:"75%", middle:"50%", inner:"25%"}; 


Q@e 


wheels = document.getELementsByCLlassName("wheel"); © 
h,s,l,w,p,u; 
(var i=0, n=wheels.length; i<n; i++){ 
w = wheels[i]; 
s = saturation[i]; @ 
for (h=0; h < 360; h += wedge ) { 

for (p in lightness){ © 
l = lightness[p]; 
u = document.createELementNS(svgNS, "use" ); 
u.setAttributeNS(xlinkNS, "href", "#"+p ); 
u.setAttribute("transform", "rotate("+h+")" ); O 
u.style.setProperty("fill", "hsl("+[h,s,l]+")" ); Q 
w.insertBefore(u, w.firstChild); (8) 

© 


} 
var t = document.createElementNS(svgNS, "text" ); 
t.textContent = "s = "+s; 


t.setAttribute("y", "35"); 
w.insertBefore(t, null); 
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O 每 个 色 轮 对 应 的 饱和 度 的 值 存储 在 一 个 数组 中 ， 随 时 准备 好 分 配给 每 个 
单独 的 <svg> 元 素 。 由 于 我 们 不 需要 对 这 些 值 进行 数学 计算 ， 所 以 可 以 
把 它们 存 为 带 有 % 的 字符 串 。 

O 我 们 使 用 存储 键 值 对 的 对 象 来 保存 不 同 模 形 部 分 的 id 以 及 对 应 的 亮度 的 
值 ， 而 不 是 使 用 两 个 单独 的 数组 。 


© 通过 类 名 选中 磐 套 的 <svg> 元 素 。 


O 在 for 循环 的 每 个 周期 内 通过 索引 来 获取 每 个 <svg> 以 及 对 应 的 饱和 度 
值 。 然 后 嵌 套 使 用 一 个 for 循环 来 循环 色相 的 值 ， 每 一 次 循环 给 每 个 要 
形 增加 30 度 。 


O 最 后 ， 另 一 种 类 型 的 for 循环 用 于 遍历 Lightness 对 象 中 的 数据 键 。 
p 变量 在 每 次 循环 中 被 设置 为 键 字符 串 (例如 ，"outer"、"middle" 
和 "inner")。 键 可 以 用 于 从 对 象 中 获取 对 应 的 值 ， 也 可 以 直接 设 为 
xlink:href 属性 的 值 。 


O 色相 值 用 于 旋转 模 形 。 由 于 色 轮 使 用 的 是 中 心 坐标 系 ， 所 以 可 以 简单 地 
绕 着 轮子 的 中 心 旋转 。transforn 属性 的 值 是 转换 函数 rotate(h) 组 成 的 
一 个 字符 串 ， 圆 括号 是 字符 串 的 一 部 分 ， 而 不 是 JavaScript 的 函数 的 一 
部 分 。 

O 内 联 样式 属性 fill 通过 一 个 包含 CSS hstL() 函数 的 JavaScript 字符 串 来 
创建 ， 同 样 它 也 包括 圆 括号 。 通 过 把 一 组 值 放 到 一 个 数组 来 创建 逗号 分 
隔 的 参数 列表 ， 当 一 个 数组 与 字符 串 连 接 时 ， 最 终 会 等 效 地 输出 数组 中 
的 每 个 值 并 用 逗号 隔 开 。 

O 之 后 ， 椒 块 被 插入 为 <svg> 的 第 一 个 子 元 素 ， 所 以 它 会 被 绘制 到 黑色 中 
心 点 以 及 白色 边缘 之 下 。 


O 最 后 的 代码 块 在 每 个 <svg> 中 都 只 会 运行 一 次 ， 并 创建 一 个 文本 标签 。 
它们 被 插入 到 所 有 其 他 元 素 的 后 面 (nothing 或 null 之 前 ) ， 所 以 文本 会 
显示 在 色 轮 的 最 上 面 。 


引入 HSL 颜色 函数 是 为 了 更 易于 创建 配套 的 颜色 : 色相 值 相 同 但 亮度 或 饱 
和 度 值 不 同 ， 或 亮度 和 饱和 度 值 相同 但 色相 值 不 同 。 选 择 HSL 模型 的 另 一 
个 原因 是 浏览 器 可 以 在 HSL 和 了 RGB 值 之 间 快 速 转换 ， 当然 它 也 有 自己 的 
局 限 性 。 色 相 色 轮 在 作为 子 元 素 混 合演 染 的 时 候 ， 与 我 们 知道 的 红 一 黄 - 
蓝 色 轮 不 太 相 符 。 更 重要 的 是 ， 亮 度 模 型 不 能 反映 出 同样 强烈 但 色相 值 不 
同 的 颜色 之 间 明 亮 程度 的 区 别 。 













































































以 上 原因 以 及 计算 机 硬件 的 历史 导致 一 些 优化 成 为 了 所 有 图 形 处 理 器 的 标 
准 ， 渐 变 和 混 色 使 用 的 是 更 加 复杂 的 颜色 模型 。 


3.4 混合 和 搭配 

眼睛 对 光 的 敏感 度 并 不 直接 和 电脑 显示 器 上 像素 的 亮度 相对 应 。 相 比 于 白 
色 与 浅 灰 色 之 间 的 变化 ， 你 更 容易 察觉 黑色 和 深 灰 色 之 间 的 变化 。 对 于 颜 
色 ， 完 全 饱和 的 蓝光 看 起 来 比 相同 强度 的 红 光 更 瞳 ， 并 且 两 者 都 不 像 全 亮 
度 的 绿 光 那 样 明亮 (从 大 脑 反 应 的 角度 来 说 )。 

因此 ， 混 合 等 量 的 红色 和 蓝 色 (或 蓝 色 和 绿色 ) 的 光 不 会 创建 出 我 们 大 脑 
认为 的 两 者 中 间 的 一 个 颜色 。 这 同样 适用 于 几乎 所 有 其 他 颜色 的 组 合 ， 以 
及 灰 度 梯度 。 

电脑 显示 器 ， 尤 其 是 Web 刚刚 流行 时 人 们 所 使 用 的 CRT 显示 器 ， 会 使 每 一 
种 颜色 值 的 真实 亮度 失真 。 标 准 不 统一 导致 同样 的 颜色 在 不 同 的 显示 器 上 
看 起 来 有 很 大 不 同 。 

当 在 计算 机 图 形 中 混合 颜色 时 ， 大 多 数 现代 电脑 显示 器 使 用 的 是 SRGB (有 
时 被 称 为 标准 RGB) 模型 。 它 定义 了 把 RGB 显示 的 颜色 转换 为 标准 的 、 
在 SRGB 兼容 的 电脑 显示 器 上 可 以 察觉 到 亮度 差异 的 方法 。 

SROB 的 使 用 主要 影响 颜色 的 混合 。 图 3-5 对 比 了 使 用 sRGB 模型 来 混合 颜 
色 或 灰 度 梯度 的 结果 与 基于 简单 的 线性 算法 来 计算 中 间 颜 色 (每 一 对 中 下 
方 的 渐变 ) 的 结果 。 

SRGB 模型 针对 用 于 显示 图 片 的 设备 类 型 及 其 亮度 做 了 很 多 假设 。 另 外 ， 人 
与 人 在 颜色 感知 上 不 尽 相同 ， 更 不 用 说 存在 色 宦 (眼中 缺少 一 种 或 多 种 感光 
ER) 等 因素 。 也 许 你 并 不 认为 SRGB 模型 比 线性 模型 好 ， 更 别 说 认为 它 是 
最 好 的 混合 方式 。 但 是 它 已 经 成 为 计算 机 图 形 的 标准 ， 尤 其 是 在 Web E. 


sRGB 模型 以 及 一 般 的 RGB 色彩 空间 在 图 像 打 印 领 域 并 不 
受 欢 迎 ， 因 为 它们 不 能 编码 高 质量 打印 机 所 能 创建 的 所 有 
颜色 。SVG 规范 声明 了 为 确保 高 保 真 的 颜色 印刷 结果 而 使 
用 其 他 颜色 定义 的 方式 。 这 些 颜色 定义 使 用 国际 色彩 联盟 
(International Color Consortium, ICC) 定义 的 颜色 配置 文件 。 
ICC 由 各 大 数字 图 像 公 司 联合 创建 ， 它 的 SVG 颜色 配置 在 
Web 浏览 器 中 并 没有 实现 。 
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图 3-5: 用 sRGB 色彩 空间 混合 颜色 (每 一 对 中 上 方 的 渐变 ) 与 线性 RGB 混合 (每 
一 对 中 下 方 的 渐变 ) 的 对 比 ， 包 括 针对 完全 饱和 的 颜色 以 及 灰 度 的 比较 


CSS 以 及 大 部 分 SVG 默认 使 用 的 都 是 SRGB 模型 。SVG 规范 定义 了 color- 
interpolation 属性 ， 它 允许 使 用 者 切换 到 更 简单 的 数学 线性 混合 颜色 模式 
(LinearRGB 模式 )。 当 图 形 由 许多 高 亮度 、 高 饱和 度 、 色 相差 别 很 明显 的 颜 
色 组 成 时 ， 这 可 能 是 更 好 的 选择 。sRGB 模型 在 混合 差异 明显 的 明亮 颜色 
时 ， 会 在 生成 一 种 介 于 两 种 颜色 之 间 的 令 人 不 快 的 暗色 ， 如 图 3-5 中 第 一 部 
分 所 示 。 


























编写 本 书 时 ， 所 有 主流 Web 浏览 器 都 不 支持 LinearRGB 颜色 
混合 。 图 3-5 是 使 用 Apache Batik SVG 查看 器 生成 的 。 即 使 
是 Batik 也 仅仅 支持 线性 渐变 混合 ， 而 不 支持 分 层 颜 色 以 及 
部 分 透明 颜色 的 混合 。 
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sRGB 被 广泛 应 用 ， 但 滤 镜 计算 是 一 个 例外 。SVG 滤 镜 允许 你 直接 操作 
RGB 颜色 通道 ， 并 且 默 认 使 用 LinearRGB 来 计算 。 将 color-interpolation- 
filters 属性 值 设 置 为 sRGB 会 获得 更 好 的 浏览 器 支持 ， 从 而 在 滤 镜 中 启用 
sRGB, 


以 上 两 种 颜色 插值 模式 选项 都 是 样式 属性 ， 我 们 可 以 在 单个 元 素 或 整个 
SVG 中 使 用 表现 属性 或 CSS 规则 来 设置 。 渐 变 和 滤 镜 所 使 用 的 属性 来 自 渐 
变 或 滤 镜 的 元 素 ， 而 不 是 当前 正在 被 演 染 的 元 素 。 


对 于 不 同 颜色 的 相对 亮度 ， 某 些 滤 镜 操作 和 SVG 遮 四 使 用 的 是 它们 自己 的 
修正 方式 。 这 些 修正 都 是 基于 颜色 本 身 的 亮度 (luminance)。 亮 度 用 于 度 
量 明亮 程度 ， 它 不 同 于 ASL 颜色 国 数 所 使 用 的 亮度 (lightness) 值 。 相 反 ， 
前 者 是 基于 这 样 一 个 事实 : 完全 饱和 的 绿色 和 黄色 在 感知 上 比 完全 饱和 的 
红色 更 加 明亮 ， 而 完全 饱和 的 红色 比 完全 饱和 的 蓝 色 更 加 明亮 。 


在 一 些 浏览 器 中 ， 遮 置 从 颜色 到 亮度 的 转换 会 受到 color- 
interpolation 属性 的 影响 ， 因 此 默认 情况 下 它 与 基于 亮度 的 
滤 镜 不 同 。 














这 些 工具 所 使 用 的 亮度 调整 和 sRGB 调整 具有 相似 的 作用 ， 但 不 完全 等 
价 。sRGB 影响 灰色 或 具有 不 同 亮度 (lightness) 值 的 颜色 的 等 级 ， 而 亮度 
(luminance) 的 权重 只 会 影响 色相 的 不 同 。 此 外 ， 后 者 给 每 种 颜色 通道 都 创 
建 了 一 个 线性 的 等 级 ， 而 sRGB 定义 了 颜色 值 和 感知 亮度 之 间 的 曲线 〈 伽 
马 调 整 ) 关系 。 


所 有 这 些 对 你 有 什么 影响 呢 ? 大 多 数 情况 下 ， 它 仅仅 是 对 你 的 一 个 提醒 。 

如 果 你 在 脚本 中 计算 颜色 ,或 者 使 用 滤 镜 操作 颜色 ， 要 知道 简单 地 求 R、 

G、B 的 算术 平均 值 会 创建 一 个 与 浏览 器 混合 渐变 或 结合 部 分 透明 的 颜色 不 
同 的 结果 。 同 样 ， 使 用 滤 镜 改变 色相 (亮度 调整 ， 有 时 也 可 能 是 sRGB 调 
整 ) 与 直接 在 hsL() 颜色 函数 中 改变 色相 的 值 也 会 有 不 同 的 结果 。” 

本 章 的 内 容 大 多 都 是 理论 知识 。 我 们 在 后 面 讲 解 透明 度 〈 第 4 章 ) 和 渐变 

(第 6~9 章 ) 的 时 候 ， 将 会 看 到 颜色 混合 的 效果 。 








注 2: 感谢 Noah Blon 让 我 注意 到 hst() 颜色 函数 与 改变 色相 角度 的 滤 镜 操作 之 间 的 差异 。 
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第 4 章 


透明 





纯色 在 图 形 绘 制 中 确实 占有 一 席 之 地 ， 但 是 对 于 许多 图 形 ， 你 可 能 想 增 加 
一 点 微妙 的 变化 。 添 加 透明 就 是 其 中 的 一 种 方式 ， 它 允许 你 演 染 一 个 不 完 
全 遮挡 下 面 内 容 的 图 层 。 

从 某 种 意义 上 说 ， 透 明 是 颜色 的 另 一 面 ， 也 是 一 个 独特 且 更 加 复杂 的 话题 。 
这 体现 在 定义 透明 度 的 不 同方 式 上 。 本 章 将 对 比 这 些 方式 。 

当 我 们 谈 到 透明 度 和 网 页 设计 时 ， 有 一 点 是 不 变 的 : 我 们 不 探讨 透明 度 ， 
而 是 讨论 不 透明 度 。 这 两 个 概念 是 完全 相反 的 : 当 一 种 事物 完全 不 透明 时 ， 
它 的 透明 度 为 0; 当 一 种 事物 的 不 透明 度 为 0 时 ， 它 完全 透明 且 不 可 见 。 


ma 1 ` > 
4.1 穿 透 样式 
SVG 使 用 三 个 不 同 的 属性 来 控制 基础 形状 和 文本 的 不 透明 度 : opacity, 
fill-opacity 以 及 stroke-opacity。 我 们 可 以 通过 表现 属性 或 CSS 样式 规 
则 来 给 它们 设置 值 。 
CSS Color Module Level 3 扩展 了 了 opacity 属性 ， 使 它 可 以 应 用 到 所 有 内 容 
上 。 此 外 ， 它 没有 为 CSS te 42H) — AISI A *-opacity 属性 ， 而 是 引入 了 
新 的 颜色 函数 。 部 分 透明 颜色 可 以 使 用 rgba() 和 hsla() 颜色 函数 来 定义 ， 
它们 可 以 用 在 CSS 中 所 有 要 使 用 颜色 值 的 地 方 。 


Web 中 的 不 透明 度 通常 使 用 一 个 介 于 0.0 (不 可 见 ) 和 1.0 (纯色 ,不 透明 ) 
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之 间 的 小 数 来 表示 。 当 不 透明 度 是 颜色 或 图 像 的 固有 组 成 部 分 时 ， 这 些 数 
字 也 被 称 为 alpha 值 。rgba() 和 hsla() 中 的 a 指 的 都 是 alpha 通道 。 这 两 个 
国 数 都 接收 四 个 参数 ， 而 不 是 通常 使 用 的 三 个 ， 第 四 个 参数 是 0 到 1 之 间 
的 alpha 值 。 


以 前 在 CSS 背景 中 有 特殊 含义 的 关键 词 transparent, WE 
新 定义 为 一 个 命名 颜色 。 它 的 值 等 于 rbga(0,0,0,0)， 它 可 以 
像 其 他 颜色 关键 词 一 样 ， 在 支持 CSS3 颜色 的 浏览 器 中 使 用 。 























修改 图 形 alpha 值 的 最 终 效 果 取 决 于 你 使 用 的 方法 。 具 体 说 来 ， 整 体 
opacity 属性 与 其 他 属性 的 工作 方式 明显 不 同 。 

opacity 属性 应 用 在 设置 它 的 元 素 上 一 一 即使 是 <g> 组 、<svg> 或 者 <use> 
元 素 并 且 它 不 会 被 继承 。 最 终 绘制 的 效果 同样 会 作用 在 元 素 所 有 的 子 
内 容 上 ， 这 使 得 整个 元 素 更 加 均匀 透明 。 
































opacity 的 值 在 确定 两 个 重合 形状 或 同一 形状 填充 和 描 边 的 
重合 部 分 中 每 一 点 的 最 终 颜 色 之 后 添加 。 











设置 opacity 的 值 小 于 1 会 创建 一 个 层 芭 上下文， 它 所 有 的 子 内 容 都 会 被 压 
入 栈 中 。 在 CSS 布局 中 ， 这 可 能 会 明显 影响 元 素 的 位 置 。SVG 1.1 中 没有 
类 似 的 效果 ,但 在 SVG 2 中 它 将 会 影响 z-index 形成 的 栈 ， 并 把 所 有 的 3D 
变换 元 素 压 入 栈 中 。 


与 之 不 同 的 是 ， 当 你 设置 stroke-opacity 或 fill-opacity， 再 使 用 rgba 
BM hsla 颜色 国 数 时 ， 透 明 效 果 在 每 个 形状 绘制 时 只 作用 在 有 颜色 的 部 分 。 
stroke-opacity 和 fill-opacity 两 个 属性 默认 情况 下 都 可 以 被 继承 。 


图 4-1 展示 了 一 个 使 用 粗 的 绿色 描 边 和 黄色 填充 来 描绘 的 “8” 与 一 个 蓝 紫 
色 、 透 明度 不 变 的 椭圆 形 部 分 重合 后 的 不 同 效 果 。 黄 绿色 形状 分 别 为 完全 
不 透明 (左上 )， 以 及 通过 stroke-opacity 和 fill-opacity 属性 (EE). 
在 <use> 元 素 上 添加 opacity 属性 (左下 )、 用 rgba 颜色 值 绘 制 描 边 和 填充 
(AP) 三 种 方式 设置 半 透 明 效 果 。 例 4-1 给 出 了 代码 。 
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4-1; 一 个 黄 绿色 的 形状 在 完全 不 透明 和 三 种 设置 部 分 透明 的 方式 下 的 效果 
例 4-1 使 用 不 同 的 不 透明 方式 来 控制 图 形 的 透明 度 


<svg xmLns="http://www.w3.org/2000/Ssvg" 
xmLns:XxLink="http://www.w3.org/1999/xLink" 
width="400px" height="400px" viewBox="0 0 200 200" 
xmL: Lang="en"> 
<title>Opacity Adjustments</title> 
<defs> 
<ellipse id="background" 
ry="15" rx="35" transform="rotate(20)" 
stroke="purple" fill="LightSkyBlue" 
stroke-width="5" /> 
<path id="foreground" stroke-width="10" 
d="M0,0C0,-60 60,0 0,0 S 0,60 0,0Z" /> (2) 


© 


</defs> 
<style type="text/css"> 
svg svg { 
overflow: visible; 
} 


text { 
text-anchor: middle; 
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font-size: 7px; 
font-family: sans-serif; © 
} 
</style> 
<rect fill="#888" width="100%" height="100%" /> 
<svg width="100" height="100" x="0" y="0" 
viewBox="-40,-45 80,80"> (4) 
<use xlink:href="#background" /> 
<use xlink:href="#foreground" 
fill="yellow" stroke="green" /> (5) 
<text y="-35">solid</text> 
</svg> 
<svg width="100" height="100" x="100" y="0" 
viewBox="-40,-45 80,80"> 
<use Xlink: href="#background"/> 
<use xlink:href="#foreground" 
fill="yellow" stroke="green" 
fill-opacity="0.5" stroke-opacity="0.5" /> @ 
<text y="-35" dy="-0.3em"> stroke-opacity="0.5" 
<tspan x="0" dy="1lem">fill-opacity="0.5"</tspan> 
</text> 
</svg> 
<svg width="100" height="100" x="0" y="100" 
viewBox="-40,-45 80,80"> 
<use xlink:href="#background" /> 
<use xlink:href="#foreground" 
fill="yellow" stroke="green" opacity="0.5" /> @ 
<text y="-35">opacity="0.5"</text> 
</svg> 
<svg width="100" height="100" x="100" y="100" 
viewBox="-40,-45 80,80"> 
<use xlink:href="#background" /> 
<use xlink:href="#foreground" 
fill="rgba(100%, 100%, 0%, 0.5)" 
stroke="rgba(0%, 50%, 0%, 0.5)" /> 
<text y="-35">rgba(r,g,b,0.5) colors</text> 
</svg> 
</svg> 


O <defs> 部 分 预先 定义 了 重复 使 用 的 形状 。 作 为 背景 的 椭圆 上 ， 所 有 的 泻 
染 属 性 都 是 通过 表现 属性 来 设置 的 。 

© 前 景 <path> 指定 了 stroke-width， 它 的 绘制 样式 将 会 通过 其 他 方式 继承 。 

© CSS <style> 块 用 于 设置 文本 标签 的 样式 以 及 防止 峰 套 的 <svg> 元 素 被 裁 
BY, (EER 7px 的 font-size 将 在 局 部 坐标 系 中 解析 ， 所 以 不 会 产生 异常 
小 的 情况 。 
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O EDAREN <svg> 在 主要 图 像 的 不 同 象限 中 重复 创建 了 相同 的 局 部 坐标 
系 ， 所 以 复 用 的 图 形 可 以 使 用 相同 的 方式 定位 。 

O 背景 元 素 在 每 个 样本 中 都 复 用 一 次 ， 并 且 把 前 景 元 素 层 倒 在 它 的 上 面 。 
在 第 一 个 例子 中 ， 给 前 景 元 素 设 置 了 纯色 的 填充 和 描 边 。 


O 接 下 来 的 <svg> 元 素 定 位 在 图 像 的 其 他 象限 中 ， 并 且 给 前 景 <use> 元 素 

设置 不 同 的 表现 属性 。 
O 对 于 opacity 的 设置 ， 它 们 将 作为 一 个 结合 的 组 直接 作用 在 <use> 元 素 

上 ， 而 不 是 继承 到 复 用 图 形 上 。 
图 4-1 还 展示 了 我 们 在 第 2 章 讨论 的 一 些 概念 。 描 边 以 每 个 形状 的 边缘 为 
中 心 。 当 描 边 为 部 分 透明 时 (由 于 使 用 stroke-opacity 或 rgba 闫 色 函 数 )， 
描 边 的 内 半 部 分 的 填充 就 会 可 见 ， 这 会 创建 一 个 双色 效果 。 
另 一 个 需要 注意 的 特点 是 ， 描 边 的 重 琶 部 分 并 没有 添加 不 同 的 色调 ， 描 边 
区 域 只 会 绘制 一 次 。 从 概念 上 讲 ， 我 们 往往 认为 描 边 是 使 用 马克 笔 或 笔 刷 
沿 着 线 的 外 部 绘制 的 。 如 果 确 实 是 这 样 的 话 ， 那 些 描 边 两 次 的 区 域 将 会 有 
两 倍 强度 的 颜色 ， 就 像 你 使 用 半 透 明 的 水 彩 颜料 ， 在 相同 的 区 域 刷 两 次 那 
样 。 然 而 ， 计 算 机 是 先 计算 出 描 边 总 区 域 ， 然后 再 均匀 着 色 ， 就 像 它 是 从 
一 块 半 透 明 的 塑料 上 裁剪 下 来 的 一 样 。 
控制 不 透明 度 的 方式 有 多 种 ， 那 么 把 它们 结合 起 来 使 用 会 产生 什么 样 的 效 
果 呢 ?最 终 效果 会 合 加 。 例 如 ， 下 面 的 圆通 过 两 种 不 同 的 方式 添加 部 分 透 
明 的 填充 效果 : 

<circle r="10" fill="hsla(240,100%,75%, 0.5)" 
fill-opacity="0.6"> 
















































































它 的 效果 与 以 下 代码 完全 相同 ， 因 为 0.5 x 0.6=0.3: 


<circle r="10" fill="hsl(240,100%, 75%)" 
fill-opacity="0.3"> 


它 得 到 的 不 透明 度 更 加 复杂 ， 因 为 透明 度 是 在 合并 其 他 颜色 之 后 应 用 的 。 
尽管 如 此 ， 在 其 他 属性 导致 的 不 透明 度 级 别 改变 之 后 ，0.5 的 不 透明 度 属 性 
值 依然 会 导致 形状 中 每 个 像素 的 alpha 值 减 半 〈 乘 以 0.5). 

由 于 opacity 属性 只 是 对 每 个 像素 的 值 进行 简单 的 数学 上 的 调整 ， 使 用 大 多 
数 显 卡 的 GPU 来 实现 会 很 高 效 。 不 透明 度 的 改变 往往 会 使 动画 更 加 平 请 ， 
尽管 不 是 所 有 的 浏览 器 都 为 SVG 内 容 采 用 这 一 点 。 











部 分 透明 颜色 fill-opacity 和 stroke-opacity 不 会 进行 同样 的 优化 ， 因 为 
它们 都 仅仅 影响 元 素 的 一 部 分 。 但 是 ， 如 果 你 不 是 动态 改变 不 透明 度 的 值 ， 
这 些 属性 可 能 会 更 高 效 ， 因 为 它们 不 会 强制 创建 层 登 上 下 文 。 


4.2 ”其 他 效果 


正如 3.4 节 中 所 提 及 的 那样 ， 部 分 不 透明 对 象 创建 的 颜色 是 基于 sRGB 模型 
计算 的 。 根 据 该 规范 ， 它 应 该 会 受到 color-interpolation 模式 的 影响 ， 但 
大 多 数 查 看 SVG 的 软件 都 默认 使 用 sRGB 并 且 仅 仅 支 持 这 一 种 模式 。 


多 层 重合 显示 的 最 终 颜 色 需 要 经 过 以 下 儿 个 步 又: 首先 依据 sRGB 模型 对 
两 种 颜色 进行 缩放 ， 然 后 获取 背景 和 前 景 (alpha 值 是 前 景 的 一 个 权重 ) 的 
加 权 平 均值 ， 最 后 反 转 sRGB 缩放 。 该 计算 不 会 在 意 背 景 颜色 是 单一 元 素 
创建 的 还 是 与 部 分 透明 元 素 混 合 创建 的 。 

这 种 混合 颜色 的 方法 被 称 为 简单 alpha 合成 。 在 许多 图 形 程序 中 ， 它 也 被 称 


Ay “normal” RATEN. 

















简单 alpha 混合 之 外 
许多 图 形 程序 定义 了 另 一 种 控制 两 个 不 同 层 或 对 象 的 颜色 如 何 结合 在 一 起 
的 混合 模式 。 
在 SVG 1.1 中， 有 多 种 混合 模式 可 供 选择 ， 但 是 只 能 在 滤 镜 中 使 用 。W3C 
创建 的 新 Compositing and Blending Specification 中 将 CSS 以 及 HIML5 
canvas 使 用 的 混合 模式 的 定义 标准 化 。 它 还 介绍 了 两 个 可 以 应 用 到 SVG 上 
的 新 CSS 属性 : mix-blend-mode 和 isolation, 


元 素 上 的 mix-blend-mode 属性 用 来 控制 元 素 如 何 与 它 后 面 的 颜色 混合 。 
一 共有 16 种 不 同 的 模式 (包括 默认 的 normaL)， 分 别 定 义 了 组 合 元 素 的 
RGBA 或 HSLA 值 与 混合 背景 内 容 对 应 的 值 的 计算 方式 。 


组 元 素 或 <use> 元 素 上 的 isolation 属性 用 于 限制 混合 作用 的 范围 。 隔 离 元 
素 在 子 内 容 互 相 混 合 之 后 ， 再 使 用 自己 的 混合 模式 来 把 子 内 容 的 混合 结果 
与 背景 相 融 合 。 你 可 以 使 用 isotLation:isotate 来 显 式 地 隔离 一 个 元 素 ， 但 
有 一 些 其 他 的 CSS 属性 也 可 能 导致 司 离 ， 比 如 设置 opacity 的 值 大 于 1， 使 
FERRE, AMARA LES AE normal 的 混合 模式 ， 或 者 使 用 3D 转换 。 
HTML F HEH <svg> 元 素 默 认 会 被 隔离 。 





HERP, RORA ARH 4 Firefox, Chrome, Opera 和 Safari 中 得 到 
了 支持 。 但 下 中 和 许多 移动 浏览 器 还 不 支持 ， 微 软 的 Edge 浏览 器 正 考虑 
加 以 支持 。 


使 用 简单 的 alpha 混合 创建 的 颜色 直接 对 应 于 背景 色 和 纯色 对 象 之 间 进 行 
sRGB 渐变 产生 的 颜色 。alpha 值 决 定 了 沿 渐变 方向 偏 移 的 距离 。 如 果 alpha 
的 值 为 0， 则 该 对 象 完 全 透明 ， 渐 变 的 初始 值 是 背景 色 。 如 果 alpha 的 值 为 
0.5， 使 用 的 是 渐变 的 中 点 的 颜色 。 如 果 alpha 值 为 1 (对 象 完 全 不 透明 )， 
显示 的 颜色 与 渐变 的 终点 颜色 (前景 对 象 本 身 的 颜色 ) 相同 。 

图 4-2 中 ， 上 方 是 红色 (#F90) 到 蓝 色 (#60F) 的 光滑 渐变 ， 下方 是 在 纯 红 
色 的 长 方形 之 上 放置 一 个 蓝 色 正方 形 ， 且 逐次 改变 正方 形 的 fill-opacity 
的 值 。 图 4-2 展示 了 两 者 的 对 比 效果 。 


你 可 能 觉得 似乎 图 4-2 中 的 正方 形 也 是 使 用 渐变 填充 ， 且 渐 
变 方向 相反 。 这 是 一 种 公认 的 光学 错觉 。 你 的 眼睛 和 大 脑 会 
加 强 每 条 边 上 颜色 之 间 的 对 比 。 当 一 个 纯色 元 素 在 它 的 每 一 
侧 都 有 不 同 的 对 照 颜色 (或 一 侧 有 渐变 )， 对 比 度 的 增强 会 
让 我 们 在 感知 上 以 为 是 渐变 。 

为 了 证 明 你 看 到 的 确实 是 纯色 ,使 用 几 张 纸 ( 纸 的 颜色 都 相 


同 ) 覆盖 与 正方 形 相 邻 的 部 分 ， 直 到 你 能 看 到 一 个 单独 的 纯 
色 方 块 。 





























B 4-2: 使 用 渐变 和 不 透明 度 混合 颜色 的 对 比 ; 正方 形 由 蓝 色 正方 形 和 位 于 其 下 部 
的 纯 红色 长 方形 组 成 , 蓝 色 正 方形 的 fiLL-opacity 值 分 别 为 0、0.25、0.5、 
0.75, 1 





50 | 第 4 章 





例 4-2 是 生成 图 4-2 的 代码 。 
例 4-2 使 用 不 透明 度 搭配 渐变 来 创建 混合 闫 色 


<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xLink="http: //www.w3.org/1999/xlink" 
width="400px" height="200px" viewBox="0 0 400 200" 
xml: Lang="en"> 
<title>Blending with opacity and gradients</title> 
<defs> 
<LlinearGradient id="gradient"> 
<stop offset="0" stop-color="#F00"/> 
<stop offset="1" stop-color="#00F"/> 
</linearGradient> 
<rect id="square" width="100" height="100" y="100"/> 
</defs> 











<rect fill="url(#gradient)" width="400" height="100"/> 

<rect fill="#F00" width="400" height="100" y="100"/> 

<g fill="#00F"> 
<use xlink:href="#square" x="-50" fill-opacity="0" /> 
<use xlink:href="#square" x="50" fill-opacity="0.25" /> 
<use xlink:href="#square" x="150" fill-opacity="0.5" /> 
<use xlink:href="#square" x="250" fill-opacity="0.75" /> 
<use xlink:href="#square" x="350" fill-opacity="1" /> 

</g> 

</svg> 


在 第 6 章 中 我 们 将 会 介绍 图 4-2 中 使 用 的 <linearGradient> 和 <stop> 元 素 ， 
并 且 介 绍 如 何 利 用 它们 创建 不 同 的 渐变 效果 。 但 首先 ， 第 5 章 中 我 们 将 探 
bt SVG 中 使 用 URL 引用 另 一 个 元 素来 填充 当前 元 素 会 产生 的 结果 。 
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第 5 章 


泻 米 服 务 





当 Fill 或 stroke 的 值 比 单一 颜色 更 加 复杂 时 (transparent 或 者 其 他 )， 
SVG 使 用 一 种 叫 作 演 染 服务 的 概念 来 描述 图 形 是 如 何 被 泻 染 的 。 

演 染 服务 通过 自身 特定 的 SVG 元 素来 定义 。 这 些 元 素 (渐变 和 图 案 ) 不 会 
直接 创建 一 个 可 见 图 形 。 它 们 仅仅 用 于 形状 或 文本 的 fill 和 stroke 属性 
中 。 然 而 ， 通 过 使 用 XML 标记 来 定义 演 染 服务 ， 它 可 以 有 无 数 种 变化 任 
何 SVG 图 形 都 可 以 用 于 生成 SVG 图 案 ， 包 括 其 他 图 案 本 身 。 

相 比 之 下 ， 当 使 用 CSS 来 给 HTML 内 容 添 加 样式 时 ， 所 有 关于 如 何 绘制 元 
素 的 信息 都 必须 包含 在 CSS 样式 规则 内 。 在 CSS 2.1 中 ， 创 建 图 案 的 唯 
方式 是 引用 外 部 图 片 文件 。 在 此 之 后 ，CSS 已 经 推出 许多 以 前 只 能 在 SVG 
中 实现 的 图 形 效果 ， 比 如 渐变 以 及 改变 图 片 位 置 。 尽 管 最 终 的 结果 可 能 

起 来 很 相似 ， 但 这 些 属性 的 CSS 语法 和 等 价 的 SVG 有 很 多 不 同 之 处 。 在 
本 书 的 其 余部 分 ， 我 们 将 会 在 “CSS 与 SVG” 附注 栏 中 对 这 两 种 方式 加 以 
比较 。 
本 章 介 绍 了 基本 的 泻 染 服 务 模型 ， 并 介绍 如 何 使 用 它 来 提供 单一 泻 染 颜色 。 


5.1 泻 染 和 壁纸 


所 有 SVG 演 染 服务 的 一 个 主要 特点 是 它们 生成 的 图 形 内 容 都 在 长 方形 区 域 
内 。 有 时 这 可 能 会 有 些 限制 ,但 也 会 有 一 些 潜 在 的 性 能 优化 机 会 。 
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墙 面 。 形 状 本 身 作为 遮 或 者 模子 来 限制 真实 绘制 的 部 分 ， 正 如 粉刷 匠 在 
粉刷 墙壁 时 会 庶 住 地板、 天 花 板 、 灯 具 等 ， 最 终 被 粉刷 的 只 有 墙 辟 。 

理解 演 染 服务 〈 尤 其 是 次 论 渐变 和 图 案 时 ) 的 另 一 种 方式 是 把 浑 染 内 容 想 
象 成 一 大 张 墙纸 。 形 状 是 从 大 块 墙纸 中 裁剪 出 来 的 部 分 ， 如 图 5-1 所 示 。 


























er" =. 
~a 














5-1: 可 以 想象 填充 的 形状 是 从 矩形 图 案 中 裁剪 出 来 的 


当然 ， 计 算 机 不 会 使 用 纸 和 剪刀 ， 而 是 把 形状 作为 栅 格 形状 〈 横 向 扫描 )。 
填充 区 域内 的 每 一 个 点 时 ， 计 算 机 都 会 从 泻 染 服 务 中 查找 对 应 的 (x, y) 坐标 。 
所 以 ， 演 染 服务 可 以 是 能 够 给 每 一 个 (x, y) 值 都 分 配 特 定 颜色 的 任意 对 象 。 
理论 上 说 ,“ 泻 染 ” 可 以 是 任何 事物 : 一 种 单独 的 颜色 、 一 个 或 多 个 渐变 、 
重复 的 图 案 、 位 图 、 文 本 ， 甚 至 是 其 他 SVG 文件。 实际 上 ，SVG 1.1 有 两 
种 类 型 的 泻 染 服务 ， 渐变 和 重复 图 案 。 然 而 ， 这 些 核心 元 素 可 以 创建 上 述 
所 有 选项 ， 本 书 的 其 余部 分 将 会 对 此 进行 说 明 。 


5.2 标识 资源 


“服务 ”意味 着 它 是 多 个 资源 的 外 部 引用 。 理 论 上 说 ， 你 可 以 单独 创建 一 个 
文件 来 包含 你 所 有 的 泻 染 服务 ， 并且 在 fill 和 stroke 属性 中 引用 它 ， 但 是 
目前 浏览 器 支持 比较 差 。 通 常情 况 下 ， 演 染 服 务 指 的 是 每 一 个 渐变 或 图 案 
对 象 可 以 给 多 个 SVG 形状 提供 泻 染 (渲染 指令 )。 












































在 本 书 编写 之 时 ， 外 部 浑 染 服务 仅仅 在 Firefox 和 使 用 Presto 
泻 染 引擎 的 pre-Blink 版 本 的 Opera 中 得 到 了 支持 。 


为 了 使 用 泻 染 服 务 ， 你 需要 使 用 URL 语法 来 引用 泻 染 服务 元 素 ， 并 把 它 放 
在 CSS 的 urL() 函数 内 。 由 于 浏览 器 支持 程度 的 限制 ， 这 个 URL 几乎 总 是 
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一 个 内 部 引用 ， 就 像 urL(#myReference) 这 样 。 井 号 (#) 表示 接 下 来 是 一 
个 指向 特定 元 素 的 标记 ， 事 实 上 井 号 之 前 没有 任何 东西 表示 浏览 器 应 该 在 
当前 文档 中 查找 该 元 素 。 具 体 而 言 ， 它 寻找 的 是 一 个 id 属性 与 标记 片段 相 
匹配 的 元 素 (BN <pattern id="myReference">)。 

因此 ， 引 用 一 个 ID 为 “customBlue” 的 演 染 服务 作为 填充 值 如 下 所 示 : 


<rect fill="url(#customBlue)" width="100" height="100"/> 

















因为 fill 是 一 个 表现 属性 ， 所 以 你 还 可 以 在 文档 中 任意 位 置 使 用 一 个 
<style> 块 来 设置 值 : 


rect { 
fill: url(#customBlue) ; 





ETA ASRS SS Be SCS EY BE AB EARS, HUGE ARE 
` 会 被 更 加 具体 的 CSS 规则 覆盖 。 


外 部 样式 表 中 的 相对 URL 通常 指向 CSS 文件 的 位 置 ， 而 不 是 使 用 这 些 样式 
的 文档 的 位 置 。 这 包括 像 #customBlue 这 样 的 本 地 URL 片段 ， 如 果 它 定义 在 
外 部 CSS 文件 中 ， 则 永远 不 会 匹配 任何 东西 。 再 加 上 对 外 部 渲染 服务 的 支持 
度 比 较 差 ， 这 很 不 幸 地 意味 着 你 不 能 有 效 利用 外 部 样式 表 来 设置 谊 染 服 务 。 


























相对 URL 也 会 受到 xmL:base 属性 或 HTML<base> 元 素 的 影 
响 ， 这 两 者 都 会 导致 演 染 服务 引用 失败 。 


理论 上 (或 者 你 仅仅 需要 支持 Firefox)， 如 果 你 有 一 组 预先 定义 在 名 为 
brand.svg 的 文件 中 的 颜色 ， 你 可 以 提供 一 个 引用 该 资源 的 相对 路 径 ， 然 后 
使 用 标记 片段 来 指向 特定 元 素 : 
<rect fill="url(brand.svg#customBlue)" 
width="100" height="100"/> 
或 者 你 甚至 可 以 提供 一 个 绝对 URL 指向 同一 个 资源 ， 假 设 外 部 文件 可 以 在 
你 的 Web 域 下 安全 访问 : 


<rect fill="url(//example.com/assets/brand.svg#customBlue)" 
width="100" height="100" /> 


不 幸 的 是 ， 对 该 选项 的 支持 程度 很 差 ， 因 为 服务 的 概念 可 以 被 看 作 另 一 种 
资源 库 ， 一 种 存储 常用 颜色 、 渐 变 、 图 案 、 遮 界 以 及 其 他 资源 的 单个 文件 。 
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现在 ， 如 果 你 有 在 多 个 SVG 中 共用 的 泻 染 服务 ， 你 需要 直接 把 它们 添加 在 
每 个 文档 中 ， 要 么 在 你 的 服务 上 使 用 一 些 预 处 理 ， 要 么 使 用 Ajax 技术 来 通 
过 客户 端 JavaScript 导入 。 

因为 很 多 东西 可 能 会 对 外 部 资源 的 加 载 产 生 干 扰 ， 其 至 浏览 器 本 身 不 支持 ， 
所 以 SVG 的 fill 和 stroke 属性 允许 你 定义 一 个 备用 的 颜色 值 。 该 色 值 在 
url() 引用 之 后 设置 ， 通 过 空白 来 分 隔 ， 如 下 所 示 : 


rect { 
fill: url(brandColors.svg#customBlue) mediumBlue; 

















也 可 以 使 用 表现 属性 和 十 六 进 制 颜色 语法 : 


<rect fill="url(brandColors.svg#customBlue) #0000CD" 
width="100" height="100"/> 


AOR S AANER ARE INK, ARIES HE AE SAS ee, 


分 层 填 充 与 降级 方案 


SVG 2 中 引入 了 分 层 填充 和 分 层 描 边 ， 类 似 于 CSS 盒 布局 的 分 层 背 景 图 片 。 
使 用 多 个 背景 图 片 时 ， 多 个 洽 染 选项 使 用 从 上 到 下 用 过 号 分 隔 的 列表 来 定 
义 。 在 列表 的 最 后 可 以 添加 一 个 备用 的 颜色 ， 用 空白 与 前 面 的 内 容 分 隔 开 。 
不 同 于 CSS 中 的 简写 方式 background (设置 background-image 列表 和 单个 
background-color 值 ) ， 最 后 的 颜色 通常 不 会 在 其 他 泻 染 层 之 下 绘制 。 
例子 如 下 所 示 : 


.typeA { 
fill: url(#pattern1), url(#gradient) mediumBlue; 
} 


.typeB { 
fill: url(#pattern2), url(#gradient) darkSeaGreen; 
} 


PRERA AT VAsE Ao HK, typed 和 typeB 两 个 图 形 将 会 根据 相同 的 渐变 
层 上 不 同 的 图 案 层 来 区 分 。 如 果 没 有 找到 泻 染 服 务 (也 许 你 的 Ajax 脚本 没 
有 正确 执行 )， 两 个 图 形 将 会 使 用 不 同 的 纯色 来 绘制 。 

如 果 你 确实 想 要 在 图 案 或 渐变 层 之 下 绘制 纯色 ， 可 以 使 用 去 号 来 与 前 面 的 
层级 分 隔 : 





.typeA { 
fill: url(#pattern), mediumBlue; 
} 


.typeB { 
fill: url(#pattern), darkSeaGreen; 
} 


本 例 中 ， 两 个 图 形 的 类 使 用 了 相同 的 图 案 (可 能 添加 一 个 纹理 效果 )， 但 是 
它们 布局 在 不 同 的 纯色 之 上 。 


5.3 纯色 渐变 


很 多 时 候 ， 尤 其 是 在 商业 产品 中 使 用 颜色 时 ， 设 计 师 将 会 给 颜色 取 一 个 特 
定 的 名 称 。 同 样 的 颜色 可 能 会 在 许多 与 品牌 相关 的 图 形 中 出 现 ， 例 如 公司 
logo 的 不 同 版 本 、 标 题 文 字 、 产 品 标签 等 。 我 们 可 以 把 每 种 颜色 都 只 定义 
一 次 ， 并 分 别 给 它们 分 配 一 个 名 称 ， 然 后 就 可 以 在 内 容 中 直接 使 用 该 名 称 ， 
而 不 用 维护 它们 的 RGB 值 组 成 的 列表 。 这 也 使 得 在 设计 过 程 中 改变 某 一 颜 
色 变 得 更 加 容易 。 
SVG 谊 染 服务 非常 适合 去 做 这 项 工作 。 我 们 可 以 在 多 个 图 形 的 ftLL 和 
stroke 属性 中 引用 它 的 D ， 而 真实 的 颜色 值 只 需要 指定 一 次 且 很 容易 更 新 
(可 以 通过 这 种 方式 引用 动画 ， 我 们 将 在 第 14 章 介绍 )。 

最 初 的 SVG 规范 没有 明确 包含 纯色 泻 染 服务 ， 但 是 所 有 的 浏览 器 都 允许 你 
使 用 单个 不 变 的 颜色 组 成 的 渐变 来 实现 这 种 效果 。 例 S-1 展示 了 这 一 方式 ， 
它 使 用 <LinearGradient> 元 素 给 在 (虚构 的 ) ACME 公司 的 商标 中 使 用 的 
四 种 颜色 命名 。 这 些 颜 色 最 终 被 用 于 绘制 公司 logo， 如 图 5-2 所 示 。 















































5-2: 使 用 命名 颜色 的 ACME logo 
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例 5-1 使 用 单 色 渐变 来 给 商标 定义 命名 的 颜色 
<svg xmLns="http://www.w3.org/2000/svg" 
xmlns:xlink="http: //www.w3.0rg/1999/xlink" 
xml: Lang="en" 


width="100mm" height="50mm"> (1) 
<title>ACME Logo</title> 
<defs> 
<linearGradient id="AcmeRed"> (2) 
<stop stop-color="#FF4022" /> 
</linearGradient> 


<linearGradient id="AcmeMaroon"> 
<stop stop-color="#80201C" /> 
</linearGradient> 
<linearGradient id="AcmeGold"> 
<stop stop-color="#FFFC32" /> 
</linearGradient> 
<linearGradient id="AcmeWhiteGold"> 
<stop stop-color="#FFFCE0" /> 
</linearGradient> 
<symbol id="AcmeLogo" viewBox="0,-40 160,80" > © 
<path d="M0,0 L40,-40 L40,-20 L160, -20 
L160,20 L40,20 L40,40z" 
fill="url(#AcmeRed)"/> (4) 
<path d="M16,-10 L35,-29 L35,-15 L155,-15 L155,-10 z" 
fill="url(#AcmeGold)"/> 
<path d="M13,-7 L16,-10 L155,-10 L155,-7 z" 
fill="url(#AcmeMaroon)"/> 
<text x="40" y="15" 
style="font-family:Arial; font-weight:bold; 
font-size:20pt;" 
fill="url(#AcmeWhiteGold) ">ACME</text> 
</symbol> 
</defs> 
<use xlink:href="#AcmeLogo" /> (5) 
</svg> 


O SVG 没有 设置 viewBox 属性 ， 它 的 比例 是 由 包含 logo 的 <symbol> 元 素 


控制 的 。 然 而 ， 默 认 的 宽 和 高 确保 图 片 在 插入 到 其 他 网 页 中 时 可 以 保持 
原始 宽 高 比 和 合理 的 默认 大 小 。 


斩 该 公司 有 四 种 商标 颜色 : AcmeRed、AcmeMaroon、AcmeGold 和 
AcmeWhiteGold。 每 种 颜色 都 使 用 一 个 <LinearGradient> 元 素 和 一 个 
<Stop> 元 素 定义 为 泻 染 服 务 。 


© logo 本 身 定义 在 <symbol> 元 素 内 ， 以 便 在 其 他 图 形 中 重复 使 用 。 
viewBox 在 坚 轴 中 点 建立 了 一 个 坐标 系 。 


























© symbol 内 的 每 一 个 形状 都 使 用 一 种 预先 定义 的 泻 染 服务 来 设置 填充 色 。 


O 在 SVG 内 使 用 <use> 元 素 绘 制 logo. <use> 元 素 没 有 任何 位 置 或 大 小 属 
性 ， 所 以 重复 使 用 的 <symbol> 将 会 拉 伸 填充 整个 SVG 区 域 。 


仔细 查看 会 发 现 每 个 渐变 都 由 两 个 元 素 组 成 ，<LinearGradient> 和 <stop>: 


<linearGradient id="AcmeRed"> 
<stop stop-color="#FF4022" /> 
</linearGradient> 


<linearGradient> 定义 了 这 染 服务 ， 并 且 设 置 了 引用 它 所 需要 的 id fA. 1% 
渐变 元 素 也 包含 定义 颜色 的 <stop> 元 素 。 通 常 的 渐变 中 会 有 多 个 stop KE 
义 初 始 、 最 终 以 及 中 间 的 颜色 。 

颜色 是 通过 表现 属性 stop-color 来 定义 的 。 还 有 一 个 可 选 的 表现 属性 stop- 
opacity， 类 似 于 fill-opacity 或 stroke-opacity， 但 颜色 值 默 认 是 完全 不 
透明 的 。 


























虽然 例 5-1 在 每 个 浏览 器 的 测试 中 都 按照 预期 的 执行 ， 但 在 
Apache Batik 中 将 会 执行 失败 ， 因 为 它 对 语法 的 要 求 更 加 严 
格 。 为 了 使 其 能 够 正常 工作 ，<stop> 元 素 需 要 一 个 offset 属 
性 ， 我 们 将 在 6.1 节 中 讨论 。 








因为 颜色 是 单独 设 定 的 ， 所 以 我 们 很 容易 统一 改变 它们 的 颜色 或 添加 相同 
的 动画 。stop-color 是 一 个 表现 属性 ， 你 甚至 不 需要 通过 编辑 XML 来 改变 
颜色 ， 而 是 可 以 使 用 CSS 规则 来 覆盖 。 


结果 ， 你 可 以 使 用 CSS 条 件 规 则 来 改变 颜色 。 含 有 媒体 查询 的 样式 表 可 以 
用 于 给 高 质量 打印 机 或 灰 度 打印 指定 打印 颜色 。 由 于 这 些 颜色 用 于 在 图 形 
的 其 他 部 分 进行 引用 ， 样 式 表 不 需要 辨认 使 用 每 种 颜色 的 所 有 元 素 ， 也 不 
需要 区 分 Fill 和 stroke 的 值 。 


虽然 stop-color 是 一 个 表现 属性 ， 但 它 默 认 是 不 可 继承 的 。 
它 必须 明确 地 直接 在 <stop> 元 素 上 设置 ， 或 者 使 用 inherit 
关键 词 设置 。 




















例 5-2 给 出 了 打印 样式 的 部 分 样本 。 对 于 彩印 ， 它 使 用 HSL 函数 来 重新 定 
义 颜 色 ， 然 后 它 会 被 映射 到 打印 设备 使 用 的 整个 色 域 。 对 于 黑白 打印 ， 它 
会 给 每 个 颜色 分 配 一 个 灰色 阴影 ， 这 会 创造 出 比 颜色 自动 转换 为 灰色 更 强 
的 对 比 度 。 灰 度 版 本 的 logo 如 图 5-3 所 示 。 
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B 5-3: 把 使 用 命名 颜色 的 ACME logo 转换 为 黑白 色 
例 5-2 为 打印 图 形 重 新 定义 命名 颜色 


@media print AND (color) { 


} 


#AcmeRed stop { stop-color: 
#AcmeMaroon stop { stop-color: 
#AcmeGold stop { stop-color: 


#AcmeWhiteGold stop { stop-color: 


@media print AND (monochrome) { 


#AcmeRed stop { stop-color: 
#AcmeMaroon stop { stop-color: 
#AcmeGold stop { stop-color: 


#AcmeWhiteGold stop { stop-color: 


hsl(10, 100%, 60%); } 
hsl( 0, 65%, 30%); } 
hsl(60, 100%, 60%); } 
hsl(55, 


#555; 
#222; 
#DDD; 
#FFF; 


w w w w 


100%, 90%); } 


虽然 大 部 分 浏览 器 在 打印 网 页 时 可 以 正确 应 用 CSS 打印 样 





式 ， 但 当 用 户 在 彩色 打印 机 上 进行 黑 








总 会 应 用 黑白 样式 。 








白 打 印 时 ， 浏 览 器 并 不 


使 用 渲染 样式 来 给 非 标准 颜色 命名 还 会 使 你 的 代码 更 易于 他 人 阅读 。 使 用 


有 意义 的 id 值 ， 


发 人 员 来 说 都 更 加 清楚 明白 。 


会 使 每 个 元 素 的 颜色 和 用 途 对 于 将 来 接管 你 工作 的 任何 开 





聚焦 未 来 
<solidcolor> 泻 染 服务 


命名 颜色 的 洽 染 服务 有 许多 好 处 。 但 是 用 单 色 渐变 来 创建 命名 颜色 多 少 有 
点 儿 问 题 ， 这 肯定 不 是 这 些 元 素 的 最 初 用 途 。 


所 以 SVG 2 中 使 用 <solidcolor> 来 创建 单 色 演 染 服务 。 它 使 用 solid- 
color 和 solid-opacity 表现 属性 来 设置 颜色 的 值 。 


使 用 <solidcolor> 元 素 的 话 ， 例 5-1 中 的 四 种 商标 颜色 可 以 这 样 定义 : 


<solidcolor id="AcmeRed" solid-color="#FF4022" /> 
<solidcolor id="AcmeMaroon" solid-color="#80201C" /> 
<solidcolor id="AcmeGold" solid-color="#FFFC32" /> 


<solidcolor id="AcmeWhiteGold" solid-color="#FFFCEO" /> 
这 不 仅 减 少 了 标记 的 数量 ， 还 使 得 代码 更 容易 让 人 理解 。 
<solidColor> 元 素 (注意 大 写 的 C) 在 SVG Tiny 1.2 规范 中 就 已 经 引入 了 ， 
所 以 它 在 一 些 图 形 程序 中 得 到 了 支持 ， 但 是 你 需要 在 根 <svg> 元 素 上 明确 
地 设置 属性 version="1.2"。( 相 比 之 下 ，Web 浏览 器 会 忽略 version， 并 对 
所 有 的 SVG 内 容 使 用 最 新 的 规范 。) 最 新 的 SVG 2 规范 草案 中 改变 了 大 写 
字母 ， 使 元 素 对 HTML 更 加 友好 ， 不 幸 的 是 它 打破 了 区 分 大 小 写 的 XML 
查看 器 的 兼容 性 。 
在 本 书 编写 之 时 ，<solidColor> 和 <solidcolor> 都 没有 在 任何 主流 浏览 器 
的 稳定 版 中 得 到 支持 。 但 正在 开发 的 Firefox 会 对 此 加 以 支持 。 











矢量 图 形 通常 被 看 做 “ 线 图 "， 拥 有 锐利 的 边缘 以 及 连续 的 色 块 。 这 种 干 
净 、 简 洁 的 样式 通常 就 可 以 满足 你 的 设计 。 但 是 一 种 完整 的 图 形 语言 应 该 
有 创建 柔和 边缘 和 变换 颜色 的 选项 。 渐 变 是 SVG 中 实现 这 种 效果 的 最 简单 
的 方式 。 


渐变 是 从 一 种 颜色 或 不 透明 状态 平滑 过 渡 到 另 一 种 颜色 或 不 透明 状态 。 
SVG 目前 支持 两 种 类 型 的 渐变 : 线性 渐变 和 径 向 渐变 。 线 性 渐变 内 过 渡 阶 
段 的 每 种 颜色 沿 着 平行 线 的 方向 延伸 ， 而 径 向 渐变 内 每 种 颜色 都 是 一 个 环 
形 。 

本 章 介绍 了 SVG 渐变 的 基础 结构 ， 以 及 可 以 创建 的 不 同 颜色 变换 。 我 们 还 
会 对 比 创建 相似 效果 的 SVG 语法 与 CSS 语法 的 不 同 。 从 现在 开始 ， 所 有 
例子 中 的 渐变 都 使 用 默认 的 方向 以 及 比例 ， 并 利用 它们 填充 简单 的 长 方形 。 
接 下 来 的 章节 将 会 讲解 更 加 灵活 的 SVG 渐变 。 


6.1 逐步 渐变 


例 5-1 的 单 色 渐 变 演 示 了 创建 一 个 渐变 所 需 的 最 少 标记 。 但 我 们 没有 使 用 任 
何 创建 渐变 效果 的 特性 。 要 想 看 到 颜色 过 湾 的 效果 ， 我 们 至 少 需要 两 个 颜 
色 结 点 (stop ) 。 


双色 线性 渐变 的 基础 结构 如 下 所 示 : 
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<linearGradient id="red-blue"> 

<stop stop-color="red" offset="0"/> 

<stop stop-color="LightSkyBlue" offset="1"/> 
</linearGradient> 


两 个 <stop> 元 素 定义 了 创建 渐变 所 需要 混合 的 颜色 ， 填 充 长 方形 的 结果 如 
图 6-1 所 示 。 每 个 <stop> 都 有 一 个 新 的 属性 offset， 它 用 于 定义 颜色 在 渐 
变 中 的 位 置 。offset 的 值 可 以 使 用 0.0 到 1.0 之 间 的 数字 或 百分比 来 表示 。 
本 例 中 ， 渐 变 最 开始 是 纯 红色 ， 最 后 是 浅 鉴 色 。 

















6-1: 有 两 个 结 点 颜色 的 渐变 


当 颜 色 结 点 超过 两 个 时 ，offset 之 间 的 间隔 会 控制 颜色 变化 的 频率 。 图 6-2 
显示 了 使 用 不 对 称 渐变 的 结果 ， 代 码 如 下 : 


<linearGradient id="red-blue-2"> 
<stop stop-color="red" offset="0"/> 
<stop stop-color="LightSkyBlue" offset="0.3"/> 
<stop stop-color="red" offset="1"/> 
</linearGradient> 

















6-2; ZT offset 值 不 规则 的 结 点 创建 的 渐变 


如 果 第 一 个 offset 的 值 大 于 0 或 最 后 一 个 offset 的 值 小 于 1， 渐 变 部 分 的 
两 侧 将 会 使 用 纯色 块 填充 ， 如 图 6-3 所 示 ， 代 码 如 下 : 


<linearGradient id="red-blue-3"> 

<stop stop-color="red" offset="0.3"/> 

<stop stop-color="LightSkyBlue" offset="0.7"/> 
</linearGradient> 




















图 6-3: 使 用 两 个 结 点 ， 与 边缘 之 间 有 偏 移 的 渐变 
这 实际 上 就 是 只 使 用 一 个 <stop> 元 素 所 产生 的 效果 ， 就 像 纯 色 渐变 〈 例 
5-1) 那样 : 两 侧 的 偏 移 使 用 同样 的 纯色 填充 。 


0 到 1 (或 0% 到 100%) 范围 之 外 的 offset 值 将 会 被 限制 在 
这 个 间隔 之 内 。 


T 





XML 元 素 的 顺序 很 重要 ，<stop> 元 素 必须 按照 从 渐变 开始 到 结束 的 顺序 设 
置 。 如 果 你 定义 的 offset 的 值 比 之 前 结 点 元 素 的 offset 的 值 小 ， 它 会 被 调 
整 为 等 于 前 面 元 素 中 最 大 的 offset 值 。 


如 果 连 续 的 结 点 拥有 相同 的 offset， 你 将 会 创建 锐利 的 边缘 或 条 纹 ， 如 图 
6-4 所 示 ， 代 码 如 下 : 


<linearGradient id="red-blue-4"> 
<stop stop-color="red" offset="0.3"/> 
<stop stop-color="lLightSkyBlue" offset="0.3"/> 
<stop stop-color="LightSkyBlue" offset="0.7"/> 
<stop stop-color="red" offset="0.7"/> 
</linearGradient> 




















6-4: 使 用 渐变 创建 条 纹 
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6.2 ”透明 渐变 


之 前 的 例子 使 用 的 都 是 完全 不 透明 的 渐变 颜色 ， 但 我 们 说 过 渐变 也 可 以 很 
好 地 控制 不 透明 度 。 一 种 方法 是 使 用 rgba() 和 hsla() 这 种 半 透 明 颜色 来 给 
stop-color 设 值 。 但 SVG 有 一 种 更 简单 的 方式 ， 它 允许 独立 于 颜色 之 外 控 
制 不 透明 度 。 


每 个 渐变 结 点 的 不 透明 度 由 stop-opacity 属性 来 控制 ， 就 像 所 有 其 他 不 透 
明度 属性 一 样 ， 它 的 值 是 0 到 1 之 间 的 一 个 数字 。 同 时 与 stop-color 一 样 ， 
它 的 值 默认 是 不 继承 的 。 

你 可 以 使 用 stop-opacity 创建 一 种 颜色 从 不 透明 过 渡 到 透明 的 渐变 ， 也 可 
以 使 用 以 下 代码 实现 同时 变换 颜色 和 不 透明 度 : 


<LinearGradient id="red-blue-5"> 





<stop stop-color="red" stop-opacity="0" offset="0"/> 
<stop stop-color="lightSkyBlue" stop-opacity="1" offset="1"/> 
</linearGradient> 





图 6-5 中 显示 的 半 透 明 新 变 是 在 文本 “Gradients” 之 上 填充 矩形 。 在 最 左边 
是 纯 红色 ， 但 它 是 完全 透明 的 。 随 着 新 变 往 右 进行 ， 颜 色 也 随 着 改变 ， 同 
时 变 得 更 加 不 透明 ， 使 文本 越 来 越 模糊 。 

















6-5: 半 透 明 颜 色 渐变 


这 里 唯一 需要 的 属性 是 offset， 而 stop-color 默认 是 黑色 且 stop-opacity 
默认 是 1 (100% 不 透明 ， 或 者 说 没有 透明 度 ) 。 在 许多 颜色 渐变 中 ， 我 们 不 
设置 不 透明 度 值 而 使 用 它 的 默认 值 ， 同 样 你 也 可 以 不 设置 颜色 值 ， 这 样 的 
话 ， 渐 变 就 会 从 透明 黑色 过 渡 到 不 透明 黑色 。 
<linearGradient id="brightness"> 
<stop offset="0" stop-opacity="0"/> 
<stop offset="1" /> 
</lLinearGradient> 


该 渐变 如 图 6-6 所 示 ， 且 同样 在 渐变 填充 的 矩形 下 面 绘制 文本 ， 以 此 来 突出 









































不 透明 度 的 改变 。 

















图 6-6: 单 色 不 透明 度 渐变 


6.3 控制 颜色 变换 


我 们 可 以 使 用 更 多 的 结 点 来 创建 更 加 复杂 的 渐变 。 例 如 ， 下 面 的 例子 将 创 
建 一 个 彩虹 渐变 ， 从 品 红 到 蓝 色 再 到 青色 、 绿 色 、 黄 色 、 红 色 、 染 色 ， W 
回 到 品 红 ， 构 成 一 个 完全 饱和 颜色 的 循环 : 


<linearGradient id="rainbow"> 
<stop stop-color="#FOF" offset="0"/> 
<stop stop-color="#00F" offset="0.1667"/> 
<stop stop-color="#0FF" offset="0.3333"/> 
<stop stop-color="#0F0" offset="0.5"/> 
<stop stop-color="#FFO" offset="0.6667"/> 
<stop stop-color="#F00" offset="0.8333"/> 
<stop stop-color="#F0F" offset="1"/> 

</linearGradient> 


彩虹 渐变 效果 如 图 6-7 所 示 。 


















































图 6-7; 使 用 7 个 结 点 形成 的 彩虹 渐变 


明确 设置 颜色 结 点 是 为 了 保证 在 任何 时 候 都 至 少 有 一 个 颜色 通道 保持 最 大 
化 ， 维 持 完全 饱和 的 效果 。 下 面 的 代码 片段 使 用 HSL 函数 设置 颜色 并 使 用 
百分比 来 设置 偏 黎 ， 定 义 了 一 个 完全 相同 的 渐变 : 
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<linearGradient id="rainbow"> 
<stop stop-color="hsl(300, 100%, 50%)" offset="0%" /> 
<stop stop-color="hsl(240, 100%, 50%)" offset="16.67%" /> 
<stop stop-color="hsl(180, 100%, 50%)" offset="33.33%"/> 
<stop stop-color="hsl(120, 100%, 50%)" offset="50%" /> 
<stop stop-color="hsl( 60, 100%, 50%)" offset="66.67%" /> 
<stop stop-color="hsl( 0, 100%, 50%)" offset="83.33%"/> 
<stop stop-color="hsl(-60, 100%, 50%)" offset="100%" /> 

</linearGradient> 


品 红 ， 也 被 称 为 紫红 色 ， 使 用 了 300 度 的 色相 (渐变 的 起 
点) 和 -60 度 的 色相 (渐变 的 终点 ) 来 定义 。 因 为 他 们 在 圆 
中 角度 相同 ， 在 色 轮 中 对 应 的 色相 也 相同 。 











虽然 可 以 用 HSL 值 来 指定 颜色 ， 但 是 颜色 是 通过 RGB 颜色 空间 直线 混合 
的 ， 而 不 是 通过 HSL 色 轮 的 旋转 角度 来 混合 。 正 如 3.4 节 所 说 ， 中 间 颜 色 
受到 sRGB 模型 中 颜色 亮度 的 权重 影响 。 一 旦 调整 为 SRGB 模型 ， 每 个 通 
道 ( 红 、 绿 、 蓝 ) 的 值 都 会 单独 增加 或 减少 。 

















图 6-8: 使 用 红色 、 蓝 色 、 绿 色 结 点 (上 ) 和 使 用 品 红 、 青 色 、 黄 色 结 点 (T) 形 
成 的 彩虹 渐变 


如 果 我 们 没有 指定 首要 和 次 要 颜色 ， 品 红 (#FOF) 和 青色 (HOFF) 的 中 
点 将 不 是 完全 饱和 的 蓝 色 (#00F)， de aa 得 多 的 蓝 色 ， 因 为 它 有 部 
分 红色 通道 和 绿色 通道 变 浅 。 如 果 你 混合 纯 红色 (#F00) 和 饱和 的 蓝 色 
(#00F)， 结 果 将 是 一 个 深 紫 色 (两 个 颜色 通道 都 处 于 完全 打开 和 关闭 的 中 
间 )， 而 不 是 一 个 完全 饱和 的 品 红 。 





图 6-8 比较 了 使 用 首要 颜色 生成 的 深 暗 色 混合 与 使 用 次 要 颜色 生成 的 更 淡 、 
更 有 生机 的 渐变 。 生 成 该 图 的 完整 代码 如 例 6-1 所 示 。 


例 6-1 比较 两 个 多 色 渐 变 
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xLink="http: //www.w3.org/1999/xlink" 
width="4in" height="2in"> 
<title xml: lang="en">Dark and Light Rainbow Gradients</title> 
<linearGradient id="primary"> 
<stop stop-color="#F00" offset="0"/> 
<stop stop-color="#00F" offset="0.3333"/> 
<stop stop-color="#0F0" offset="0.6667"/> 
<stop stop-color="#F00" offset="1"/> (2) 
</linearGradient> 
<linearGradient id="secondary"> 
<stop stop-color="#FOF" offset="0"/> 
<stop stop-color="#0FF" offset="0.3333"/> 
<stop stop-color="#FFO" offset="0.6667"/> 
<stop stop-color="#FOF" offset="1"/> 
</linearGradient> 
erect width="85.714%" height="1in" x="0" y="0" 
fill="url(#primary)" /> 
<rect width="85.714%" height="1in" x="14.286%" y="1in" 
fill="url(#secondary)" /> 
</svg> 


O BX <linearGradient> 元 素 可 以 包含 在 <defs> 块 中 ， 但 这 并 不 是 必需 
的 ， 因 为 渐变 永远 不 会 平 白 无 故地 直接 绘制 。 

O 每 个 渐变 都 使 用 了 三 种 颜色 ， 但 有 四 个 结 点 ， 这 是 为 了 在 最 后 循环 到 初 
始 颜色 。 


O 两 个 矩形 均 占 据 整 个 图 形 七 分 之 六 的 宽度 (85.714%)， 且 相互 偏 移 了 图 
形 宽度 的 七 分 之 一 (14.286%) 〈 抑 形 宽度 的 六 分 之 一 )， 这 是 为 了 对 准 
渐变 中 色相 大 致 相同 的 部 分 。 注 意 由 于 sRGB 模型 的 调整 导致 色相 不 会 
完美 对 齐 ， 例 如 品 红 和 青色 中 间 仍 然 是 浅 紫 色 。 

如 图 6-8 所 示 ， 定 义 谊 染 服 务 的 标记 有 时 会 比 定义 被 请 染 图形 的 标记 还 长 。 

为 了 更 好 的 组 织 结 构 ， 可 重复 使 用 的 内 容 通常 放置 在 文件 的 顶部 ， 且 通常 

使 用 <defs> (definitions) 元 素来 进行 分 组 。 另 外 ， 如 果 渐 变 只 被 使 用 一 

次 ， 你 可 能 希望 直接 在 使 用 它 的 形状 定义 之 前 定义 它 。 

为 了 获得 理想 的 浏览 器 支持 ， 应 该 在 定义 使 用 渐变 的 元 素 之 
前 先 在 文档 中 定义 渐变 。 许 多 版 本 的 Safari 将 不 能 正常 使 用 
定义 在 文件 后 面 的 渐变 。 
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css 5 SVG 
使 用 CSS 函数 来 定义 渐变 
渐变 通过 Image Values and Replaced Content Module 规范 被 引入 CSS3 中 ， 
该 规范 是 W3C 候选 提议 且 它 在 所 有 最 新 的 Web 浏览 器 中 都 得 到 了 支持 。 
如 果 想 要 支持 旧 的 浏览 器 ， 需 要 给 样式 声明 添加 旧 的 实验 性 的 语法 前 缓 ， 
但 在 TE10 之 前 和 Opera Mini 浏览 器 中 都 不 支持 。 


虽然 CSS 和 SVG 渐变 最 终 的 结果 非常 相似 ， 但 在 定义 和 使 用 过 程 中 还 是 有 
se aus u iy neta 
将 在 接 下 来 的 几 章 中 重点 介绍 。 
两 者 之 间 最 明显 的 不 同 是 定义 的 方式 : SVG 渐变 是 通过 XML 标签 元 素来 
创建 ， 而 CSS 渐变 是 在 样式 表 内 使 用 函数 来 创建 。 
使 用 CSS 中 的 Linear-gradient 函数 创建 一 个 简单 的 线性 渐变 ， 函 数 的 参 
数 是 使 用 过 号 分 隔 的 颜色 结 点 值 列表 。 每 一 个 结 点 由 空格 分 隔 的 颜色 值 和 
偏 移 值 组 成 ， 如 下 所 示 : 

background: linear-gradient(red 0%, lightSkyBlue 100%); 


background: linear-gradient(#FOF 0%, #0FF 33.33%, 
#FFO 66.67%, #FOF 100%); 


CSS 线性 渐变 默认 的 方向 是 从 上 到 下 ， 而 SVG 默认 的 方向 是 从 左 到 右 (我 
们 将 在 第 7 章 中 介绍 如 何 改变 两 种 类 型 渐变 的 方向 ) 。 


果 没 有 设置 偏 移 值 ， 结 点 将 会 在 0% 到 100% 之 间 平 均 分 布 。 因 此 下 列 代 
码 实现 与 上 面 代码 相同 的 渐变 效果 : 


background: linear-gradient(red, lightSkyBlue); 
background: linear-gradient(#FOF, #0FF, #FFO, #FOF); 


如 果 只 指定 了 部 分 偏 移 的 值 ， 没 有 指定 的 值 将 在 设置 的 点 之 间 平 均 分 配 。 


定义 CSS 渐变 偏 移 时 不 能 使 用 小 数 来 代替 百分数 ， 但 是 你 可 以 使 用 长 度 单 
位 或 calc() 函数 来 定义 它 。 例 如 ， 如 下 的 CSS 创建 了 一 个 背景 渐变 ， 在 
padding 区 域 从 黑色 渐变 到 白色 ， 但 是 无 论 元 素 多 高 ， 剩 余部 分 范围 内 都 是 
纯 白 色 : 

padding: 1em; 


background: linear-gradient(black, white 1em, 
white calc(100% - 1em), black); 





你 还 可 以 给 偏 移 设置 大 于 100% 或 小 于 0 的 值 ， 颜 色 将 会 根据 渐变 的 可 见 部 
分 是 否 是 更 大 的 渐变 的 一 部 分 来 进行 调整 。 

在 CSS 渐变 中 没有 办 法 直接 设置 stop-opacity 值 ， 但 是 你 可 以 使 用 rgba() 
和 hstLa() 颜色 函数 来 定义 半 透 明 的 颜色 。 


CSS 渐变 和 SVG 渐变 之 间 一 个 更 细微 不 同 是 ，CSS 不 可 以 把 泻 染 服务 定义 
为 一 种 唯一 的 资源 类 型 ， 相 反 ，CSS 渐变 被 定义 为 一 个 单独 的 没有 固定 尺 
thet HOM KEAN, 

CSS 渐变 函数 用 于 代替 urL() 对 图 片 文 件 的 引用 ， 主 要 用 在 background- 
image 列表 (或 者 简写 的 background) 中 。 它 还 可 以 被 用 在 list-style- 
image 或 border-image 属性 中 ， 尽 管 浏览 器 是 在 支持 背景 渐变 之 后 才 支 持 这 
些 属性 的 。 


目前 CSS 渐变 不 可 以 用 于 代替 SVG 元 素 中 Fill 和 stroke 属性 引用 的 泻 染 
服务 ， 但 在 SVG 2 中 这 一 点 很 可 能 会 改变 。 
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第 7 章 


各 种 形状 和 尺寸 的 渐变 





目前 为 止 ， 我 们 已 经 讨论 了 如 何 创建 渐变 ， 如 何在 渐变 的 起 点 (Ac) 和 终 
点 〈 右 ) 之 间 设 置 含有 颜色 和 不 透明 度 的 结 点 的 位 置 。 如 果 你 涉及 的 所 有 
图 形 中 渐变 的 方向 都 要 求 从 左 到 右 ， 那 么 现在 所 学 的 知识 就 已 经 足够 了 。 
但 是 ， 很 可 能 你 希望 渐变 是 沿 从 上 到 下 ， 或 者 60 度 的 方向 ， 或 有 其 他 的 一 


些 变换 。 


本 章 讨论 了 两 种 控制 线性 渐变 位 置 的 方式 ， 还 讨论 了 如 何 控制 它 的 缩放 。 
我 们 假定 你 已 经 可 以 正确 使 用 基础 的 SVG 形状 元 素 (尤其 是 <Line>)、 坐 
标 系 以 及 变换 。 它 们 之 间 细 微 复 杂 的 区 别 你 要 心中 有 数 ， 此 外 SVG 和 CSS 
在 细节 上 也 有 一 些 区 别 ， 我 们 也 会 着 重 介绍 这 些 内 容 。 

不 同 的 Web 浏览 器 在 平滑 演 染 渐变 的 效果 上 有 明显 差异 ， 我 们 对 此 无 能 大 
力 。 尤 其 是 在 使 用 锐利 的 颜色 过 渡 时 ， 所 以 一 定 要 测试 代码 ， 确 保 运 行 的 
结果 你 可 以 接受 。 


~ ally I= 
7.1 渐变 天 量 
设置 渐变 位 置 的 第 一 种 方式 是 使 用 x1、y1、x2 和 y2 等 属性 来 定位 渐变 的 起 
点 和 终点 ， 就 像 画 一 条 线 一 样 。 默 认 情 况 下 ，x2 的 值 是 100%， 其 他 属性 的 
值 为 0。 如 果 你 使 用 这 些 属性 值 来 画 一 条 线 ， 它 将 沿 着 图 形 的 顶部 从 左 到 右 
绘制 ; 


<line x1="0" y1="0" x2="100%" y2="0" /> 
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如 有 果 你 想 画 一 条 从 左上 角 到 右 下 角 的 对 角 线 ， 你 将 使 用 如 下 代码 : 
<line x1="0" y1="0" x2="100%" y2="100%" /> 


那么 设置 相同 属性 的 线性 渐变 表示 的 是 什么 呢 ? 这 些 由 属性 定义 的 线 被 称 
为 渐变 矢量 。 结 点 的 偏 移 ， 以 及 它们 之 间 颜 色 的 混合 值 ， 都 是 根据 这 条 线 
的 长 度 来 度量 的 。 颜 色 会 无 限 延 伸 到 线条 的 两 端 。 对 于 如 下 渐变 ， 蓝 色 的 
结 点 在 左上 角 (使 用 x1 和 yl 定义 的 点 )， 而 绿色 结 点 在 右 下 角 (使 用 x2 和 
y2 定义 ) : 
<linearGradient id="blue-green" 
x1="0" y1="0" x2="100%" y2="100%" > 
<stop stop-color="blue" offset="0"/> 


<stop stop-color="darkSeaGreen" offset="1"/> 
</linearGradient> 


当然 你 也 可 以 利用 各 个 属性 的 默认 值 ， 仅 使 用 以 下 属性 就 能 实现 与 上 述 相 
同 的 渐变 

<LinearGradient id="blue-green" y2="100%" > 
如 图 7-1 所 示 ， 设 置 渐变 矢量 属性 值 为 0% 或 100% 的 所 有 可 能 的 组 合 来 填 
充 长 方形 ， 去 除 起 始点 和 终点 为 同一 点 的 情况 。 每 一 列 分 别 以 不 同 角 处 的 
点 (以 (x1,y7) 值 定义 ) 作为 矢量 的 起 点 ， 每 一 行 分 别 以 不 同 的 点 作为 终点 。 

















图 7-1: 使 用 不 同 渐变 矢量 定义 的 渐变 
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如 果 新 变 矢 量 的 起 点 和 终点 相同 ， 图 形 将 会 以 纯色 来 进行 填 
充 。 具 体 是 哪 一 种 颜色 目前 完全 依赖 于 浏览 器 。SVG 规范 中 
规定 整个 区 域 应 该 使 用 最 后 一 个 渐变 结 点 的 颜色 ， 但 是 编写 
本 书 时 ，Blink 和 WebKit 浏览 器 以 及 下 浏览 器 都 是 用 第 一 
个 渐变 结 点 中 定义 的 颜色 来 填充 的 。 








例 7-1 给 出 了 绘制 图 7-1 的 部 分 代码 。 代 码 中 使 用 了 渐变 的 简写 形式 : 如 果 
你 在 渐变 中 使 用 xLink:href 属性 来 引用 另 一 个 渐变 ， 新 的 渐变 继承 旧 的 浙 
变 ， 然 后 根据 新 的 属性 来 做 出 相应 的 改变 。 如 本 例 所 示 ， 如 果 新 的 渐变 没 
有 任何 <stop> 元 素 ， 则 会 使 用 引用 的 渐变 中 的 结 点 。 


xLink:href 属性 值 是 一 个 URL， 但 是 根据 SVG 1.1 规范 ， 它 
应 该 指向 相同 文档 中 的 一 个 元 素 。 但 是 Firefox 中 支持 链接 
外 部 文件 中 定义 的 渐变 。 




















例 7-1 中 在 每 个 渐变 的 上 方 都 绘制 一 条 线 来 表示 渐变 矢量 ，marker 用 于 在 
线条 的 终点 绘制 第 头 来 告诉 你 它 指向 哪个 方向 。 


例 7-1 使 用 属性 来 设置 渐变 矢量 的 位 置 
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xLink="http: //www.w3.org/1999/xlLink" 
width="400px" height="300px" viewBox="0 0 400 300"> 
<title>Same Gradient, Different Vectors</title> 
<style type="text/css"> 
line { 
stroke: darkMagenta; (1) 
stroke-width: 2; 
marker-start: url(#start); 
marker-end: url(#end); 
} 
marker { 
fill: darkMagenta; 
stroke: none; (2) 


svg { 
overflow: visible; 
} 


</style> 
<defs> 
<linearGradient id="blue-green" > © 
<stop stop-color="blue" offset="0"/> 
<stop stop-color="darkSeaGreen" offset="1"/> 
</linearGradient> 
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<marker id="start" viewBox="-2 -2 4 4"> (4) 
<circle r="1.5"/> 
</marker> 
<marker id="end" viewBox="-4 -2 4 4" orient="auto"> 
<polygon points="-4,-2 0,0 -4,2"/> 
</marker> 
</defs> 


<g transform="translate(2,2)"> © 
<svg width="1in" height="1in"> 
<linearGradient id="blue-green-1" xlink:href="#blue-green"/> 
<rect width="100%" height="100%" fill="url(#blue-green-1)"/> 
<line x1="0" y1="0" x2="100%" y2="0"/> o 
</svg> 


<svg width="1in" height="1in" x="0" y="100"> 
<linearGradient id="blue-green-2" xlink:href="#blue-green" 
x2="100%" y2="100%" /> (3) 
<rect width="100%" height="100%" fill="url(#blue-green-2)"/> 
<line x1="0" y1="0" x2="100%" y2="100%" /> 
</svg> 


<!-- 9 more samples omitted for length --> © 


<svg width="1in" height="1in" x="300" y="200"> 
<linearGradient id="blue-green-12" xlink:href="#blue-green" 
x1="100%" y1="100%" x2="0" y2="100%"/> @ 
<rect width="100%" height="100%" fill="url(#blue-green-12)"/> 
<line x1="100%" y1="100%" x2="0" y2="100%" /> 
</svg> 
</g> 
</svg> 
O <line> 元 素 必 须 设置 stroke 属性 来 变 得 可 见 ， 两 个 marker 属性 用 于 创 
建 箭头 效果 。 
@ marker 使 用 与 line 描 边 相配 的 颜色 填充 ， 明 确 把 stroke 属性 设置 为 
none 是 为 了 解决 I[E 浏览 器 中 marker 会 从 Line 继承 样式 的 bug。 
O 第 一 个 渐变 永远 都 不 会 直接 使 用 ， 它 为 所 有 其 他 的 渐变 定义 渐变 结 点 。 
O <marker> 元 素 用 于 绘制 箭头 和 矢量 的 轴 点 。 

O 每 一 样 块 都 绘制 为 1 平方 英寸 (96px) ， 为 了 添加 内 边 距 的 效果 ， 每 隔 
100px 放置 一 个 样 块 ， 并 从 距离 顶部 和 左边 2px 偏 移 的 地 方 开始 绘制 。 
@ 每 一 个 <LinearGradient> 使 用 xlink:href 来 从 主 渐 变 中 复制 结 点 ， 
blue-green-1 渐变 使 用 默认 的 位 置 属性 来 创建 一 个 从 左 到 右 的 渐变 。 


O 明确 地 使 用 相同 的 位 置 属性 声明 <Line> 元 素来 显示 矢量 。 
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O 对 于 第 二 个 (以 及 以 后 的 ) 样 块 ， 必 须 明 确 设置 渐变 矢量 的 部 分 或 全 部 
位 置 属性 。 

O 你 应 该 可 以 从 图 7-1 所 示 的 箭头 想象 出 省 略 的 代码 是 什么 ， 把 它们 都 打 
印 在 书 上 就 显得 太 哆 吴 了 。 更 好 的 做 法 是 使 用 JavaScript 来 生成 所 有 的 
元 素 而 不 是 重复 标记 。 

© 对 于 最 后 一 个 渐变 ， 所 有 的 位 置 属性 都 被 明确 设 定 来 创建 一 个 沿 着 长 方 
形 底部 从 右 到 左 的 渐变 矢量 。 注 意 最 终生 成 的 渐变 在 效果 上 与 沿 着 长 方 
形 顶 部 从 右 到 左 的 矢量 创建 的 渐变 完全 相同 。 

图 7-1 中 的 所 有 渐变 例子 都 是 从 一 个 角 到 另 一 个 角 ， 跨 越 整个 正方 形 。 但 并 

不 是 必须 这 样 做 。 如 果 矢 量 没 有 覆盖 整个 形状 ， 默 认 会 使 用 纯色 来 填充 剩 

下 的 部 分 。 效 果 就 好 像 分 别 给 第 一 个 和 最 后 一 个 结 点 设置 偏 移 使 它们 偏离 

渐变 矢量 的 起 点 和 终点 。 











改变 渐变 矢量 的 长 度 和 改变 偏 移 在 重复 渐变 中 会 有 不 同 的 效 
果 ， 我 们 将 在 第 8 章 中 对 此 进行 讨论 。 








渐变 矢量 的 起 点 和 终点 可 以 扩展 到 0% 到 100% 这 个 区 域 之 外 ， 这 与 结 点 
偏 移 不 同 ， 不 会 位 于 0% 到 100% 之 间 。 你 可 能 会 问 :“100% 是 相对 于 谁 
AWE? ” 


7.2 WRBORS 

在 例 7-1 F, FRE ARRAY <svg> 元 素 在 每 个 占据 100% 宽 和 高 的 长 方形 
(也 就 是 每 个 渐变 ) 中 创建 局 部 坐标 系 。 这 意味 着 可 以 给 <Line> 元 素 的 坐 
标 设 置 百 分 比 ， 并 让 它 直 接 匹 配 渐变 向 量 使 用 的 百分比 。 

通常 你 要 使 用 渐变 填充 的 形状 不 会 占据 整个 坐标 系统 。 所 以 ， 理 解 这 一 点 
非常 重要 : 渐变 矢量 属性 中 的 值 默认 并 不 是 根据 绘制 <Line> 时 使 用 的 局 部 
坐标 系 来 度量 的 。 相 反 ， 它 们 是 基于 要 填充 的 形状 的 对 象 边界 盒 创 建 的 新 
坐标 系 来 定义 的 。 

那么 什么 是 对 和 象 边 界 盒 呢 ? 对 于 像 例 7-1 中 使 用 的 长 方形 ， 它 的 对 象 边 界 盒 
就 是 长 方形 。 更 准确 地 说 ， 就 是 长 方形 本 身 的 几何 面积 且 不 包括 任何 描 边 。 
对 于 其 他 形状 来 说 ， 就 是 可 以 将 图 形 包 含 在 本 身 (可 能 是 变换 后 ) 坐标 系 
内 的 最 小 矩形 。 再 次 声明 ， 边 界 盒 不 包括 任何 描 边 或 标记 。 
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图 7-2: 使 用 不 同 渐变 矢量 定义 的 渐变 来 填充 辆 


如 果 形 状 在 去 除 描 边 或 标记 之 后 高 或 宽 为 0， 那 么 它 的 边界 
盒 为 空 ， 且 渐变 将 会 视 为 错误 来 处 理 (将 会 使 用 降级 的 颜 


色 )。 这 在 绘制 直线 时 可 能 会 有 问题 ， 我 们 将 在 第 13 章 中 讨 
论 解 决 办 法 。 


对 于 非 矩形 形状 ， 产 变 矢 量 的 起 点 和 终点 可 能 在 形状 的 外 部 ， 也 可 能 在 0% 
和 100% 范围 之 内 。 图 7-2 显示 了 用 圆 来 替换 例 7-1 中 所 有 长 方形 的 最 终 
效果 : 


<circle cx="50%" cy="50%" r="50%" fill="url(#gradient-id)"/> 
每 个 圆 都 尽 可 能 地 填 满 它 的 局 部 坐标 系 ， 但 四 个 角 无 法 填充 。 渐 变 的 定义 方 
式 没 有 改变 ， 所 以 渐变 矢量 依然 是 从 角 到 角 的 。 对 角 矢量 的 最 终结 果 是 渐变 
中 起 始 和 终止 的 颜色 结 点 被 裁剪 掉 了 。 重 新 审视 我 们 的 泻 染 服务 ， 泻 染 效 果 
被 缩放 到 适应 整个 对 象 边界 盒 ， 不 过 后 来 庶 罩 带 被 删除 露出 下 面 形状 。 
如 上 所 述 ， 对 象 边 界 盒 整体 是 一 个 全 新 的 坐标 系 。 它 不 仅仅 把 百分比 缩放 
到 适合 整个 盒子 ， 而 且 对 基本 的 用 户 单位 也 做 了 同样 的 处 理 。 水 平方 向 上 
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的 一 个 单位 等 于 边界 框 宽度 的 100%， 垂 直方 向 上 的 一 个 单位 等 于 边界 框 高 
BERI 100%。 换 而 言 之 ， 你 可 以 使 用 0 到 1 之 间 的 小 数 来 代替 百分比 。 


你 甚至 还 可 以 使 用 带 单位 的 长 度 值 ， 但 是 〈 与 SVG 中 其 他 形式 的 缩放 一 致 ) 
长 度 单位 也 会 随 着 用 户 单位 来 缩放 。1px 的 长 度 等 于 1 个 用 户 单位 、 等 于 新 
坐标 系 中 宽 或 高 的 100%。 所 有 其 他 长 度 单 位 将 等 于 形状 宽 或 高 的 几 倍 。 


因为 单位 被 缩放 到 匹配 边界 盒 的 宽 和 高 ， 所 以 1 水 平 单位 不 一 定 等 于 1 垂 
直 单 位 。 例 7-1 中 它们 相等 是 因为 被 填充 的 形状 是 一 个 正方 形 。 最 终 ， 对 角 
渐变 矢量 是 一 条 完美 的 沿 45 度 方向 的 线 。 这 也 意味 着 与 渐变 矢量 垂直 (成 
直角 ) 的 线 是 一 条 相对 方向 的 45 度 线 ， 即 在 相对 的 角 之 间 的 对 角 线 。 


这 一 点 非常 重要 ， 因 为 这 些 垂 直线 相当 于 拥有 相同 颜色 的 渐变 的 一 部 分 。 
结 点 颜色 值 将 会 沿 着 渐变 矢量 垂直 线 癌 两 侧 扩展 。 但 渐变 矢量 正好 在 连接 
两 个 相对 角 的 盒 对 角 线 上 时 ， 渐 变 的 中 点 (等 于 50% 的 节点 偏 移 ) 的 垂直 
线 沿 着 盒子 剩 下 两 个 角 之 间 的 对 角 线 延长 。 例 7-2 构建 了 一 个 在 50% 偏 移 
的 位 置 发 生 颜色 又 变 的 渐变 来 突出 这 种 关系 。 


例 7-2 通过 对 角 渐变 创建 倾斜 的 条 纹 
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.0rg/1999/xlink" 
width="100%" height="100%"> 
<title xml:lang="en">Stretched Object Bounding Box gradients 
</title> 
<style type='text/css'> 
</style> 
<linearGradient id="diagonal" y2="100%"> 
<stop offset="0" stop-color="white"/> 
<stop offset="0.5" stop-color="red"/> 
<stop offset="0.5" stop-color="blue"/> 
<stop offset="1" stop-color="white"/> 
</linearGradient> 
<rect height="100%" width="100%" fill="url(#diagonal)"/> 
</svg> 


在 例 7-2 中 ， 作 为 整体 的 SVG 和 渐变 填充 的 长 方形 都 被 设置 为 100% 来 填 
充 浏览 器 窗口 或 使 用 SVG 绘制 的 图 片区 域 的 宽 和 高 。 图 7-3 显示 了 对 角 渐 
变 绘制 在 一 个 正方 形 区 域 时 的 效果 。 渐 变 矢量 是 从 左上 到 右 下 的 45 度 的 对 
角 线 ， 渐 变 50% 偏 移 位 置 的 条 纹 正 好 是 右上 到 左下 的 对 角 线 。 

如 果 你 要 填充 的 形状 (更 准确 地 说 ， 是 对 象 边界 盒 ) 不 是 一 个 完美 的 正方 
É, HARE AWE? 对 角 线 将 不 是 45 度 角 。 但 是 ， 由 于 对 象 边 界 盒 坐标 
系 的 拉 伸 效果 ， 渐 变 的 中 点 依然 在 相对 角 的 对 角 线 上 ， 如 图 7-4 所 示 。 
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图 7-3: 在 一 个 正方 形 中 ,绘制 一 个 在 50% 偏 移 的 位 置 发 生 颜色 骤 变 的 对 角 渐 变 

















图 7-4: 在 一 个 长 方形 中 ,绘制 一 个 在 50% 偏 移 的 位 置 发 生 颜色 骤 变 的 对 角 渐 变 


颜色 相同 的 线 不 再 垂直 于 我 们 所 说 的 一 般 意义 上 的 渐变 矢量 ， 至 少 在 坐标 
系 表象 中 不 是 这 样 。 在 拉 伸 的 坐标 系 中 ， 它 们 和 垂直 线 在 x 和 y 坐标 之 间 
拥有 相同 的 数学 关系 。 在 数学 上 ， 这 种 “理论 垂直 ” 线 实际 上 被 称 为 法 向 
量 ， 但 是 数学 家 对 什么 是 法 向 量 有 不 同 的 见解 。 

对 象 边 界 盒 坐标 系 因此 创建 了 一 个 不 均匀 的 缩放 ， 类 似 于 有 两 个 参数 的 


scale(sx,sy) 变换 或 preserveAspectRatio="none" 设置 。 
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灵 社 区 会 员 ChenyangGao(2339083510@qq.com) 专 享 尊重 版 权 


Q 


a 
7.3 在 盒子 表面 绘制 
如 果 你 阅读 仔细 ， 你 可 能 注意 到 了 不 久 前 出 现 的 “默认 ”。 对 象 边 界 
盒 单位 是 定义 渐变 矢量 的 默认 值 ， 但 它 不 是 唯一 的 选择 。 你 可 以 在 
<linearGradient> 元 素 上 使 用 gradientunits 属性 来 改变 它 。 
设置 gradientUnits 的 值 为 userspaceOnUse 使 浏览 器 在 用 于 绘制 要 填充 的 形 
状 的 坐标 系 内 解析 你 的 x1, y1, x2 和 y2 属性 。 


如 果 你 想 明 确 地 设置 默认 行为 ，gradientUnits 的 另 一 个 值 是 


objectBoundingBox。 




















75: 在 一 个 完全 填充 其 坐标 系 长 方形 中 ， 绘 制 一 个 在 50% 偏 移 位 置 发 生 颜 色 又 
变 的 用 户 空间 对 角 渐 变 


图 7-5 显示 了 修改 例 7-2 中 gradientunits 属性 值 的 结果 : 


<linearGradient id="diagonal" y2="100%" 
gradientUnits="userSpaceOnUse"> 


FAFA SE AC TERA, AR ee PAM SRA EAT a PPA. m, 
由 于 坐标 系 本 身 没 有 扭曲 ，50% 的 结 点 沿 着 真实 世界 的 直角 对 角 绘 制 ， 而 
不 再 连接 另外 两 个 角 。 

避免 坐标 系 被 扭曲 仅仅 是 使 用 userSpaceonUse 的 一 个 原因 。 通 过 userSpaceOnUse 
单位 ， 你 可 以 使 单个 渐变 在 形状 与 形状 之 间 效 果 一 致 。 实 例 见 例 7-3， 最 终 








结果 如 图 7-6 所 示 。 
例 7-3 使 用 userSpaceOnUse 渐变 单位 来 填充 多 个 形状 


<svg xmLns="http://www.w3.org/2000/svg" 
xmlns:xlink="http: //www.w3.0rg/1999/xlink" 
width="400px" height="300px" viewBox="0 0 400 300"> 
<title xml: lang="en">Tropical Sunset User-Space Gradient</title> 
<linearGradient id="sunset" gradientUnits="userSpaceOnUse" 
y1="1em" x2="0" y2="250px"> (1) 
<stop stop-color="midnightBlue" offset="0"/> 
<stop stop-color="deepSkyBlue" offset="0.25"/> 
<stop stop-color="yellow" offset="0.5"/> 
<stop stop-color="lightPink" offset="0.8"/> 
<stop stop-color="darkMagenta" offset="0.99"/> 











<stop stop-color="#046" offset="0.99"/> © 
</linearGradient> 
<rect height="100%" width="100%" fill="dimGray" /> © 
<g fill="url(#sunset)"> (4) 


<rect x="20" y="20" width="100" height="120" /> 

<rect x="280" y="20" width="100" height="120" /> 
<rect x="20" y="160" width="100" height="120" /> 
<rect x="280" y="160" width="100" height="120" /> 


</g> 
<rect x="140" y="0" width="120" height="300" 
fill="url(#sunset)" /> (5) 
</svg> 


@ 给 linearGradient 设置 userSpaceOnUse 值 允 许 我 们 使 用 长 度 (例如 lem 
BK 250px) 来 定位 渐变 矢量 。xl 属性 没有 指定 ， 所 以 使 用 默认 值 0， 而 
x2 属性 (默认 为 100%) 被 重 置 为 0 来 创建 一 个 直线 垂直 渐变 。 


O 最 后 两 个 源 变 结 点 拥有 相同 的 偏 移 值 ， 在 夕阳 的 天 空 和 静止 的 水 面 之 
间 创 建 了 一 条 分 界线 。 所 有 超出 渐变 矢量 范围 的 点 都 会 被 这 染 为 暗 蓝 
绿色 #046。 

© 在 使 用 渐变 填充 的 元 素 下 ， 放 置 一 个 灰色 的 长 方形 来 填充 整个 SVG。 


O 与 往常 一 样 ， 你 可 以 在 组 元 素 上 定义 一 个 填充 值 ， 它 会 被 所 有 的 子 
形状 继承 。 但 是 ， 每 个 形状 仍然 会 单独 计算 渐变 ， 如 果 使 用 的 是 
objectBoundingBox 渐变 ， 每 个 形状 的 渐变 将 会 基于 它 自己 的 边界 盒 ， 而 
不 是 组 。 

O 为 了 证 明 渐变 的 连续 性 与 组 无 关 ， 中 间 的 长 方形 单独 进行 绘制 。 它 填 满 了 
SVG 的 高 度 ， 所 以 你 会 看 到 整个 渐变 ， 包 括 超出 渐变 矢量 的 纯色 部 分 。 
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图 7-6: 连续 跨越 多 个 图 形 的 渐变 


在 例 7-3 初始 代码 的 最 后 ，offset="1" 处 有 锐利 的 渐变 变换 
(在 天 空 和 大 海 之 间 )。 根 据 规范 ， 当 多 个 结 点 拥有 相同 的 偏 
移 值 时 ， 该 点 以 及 超出 部 分 填补 的 颜色 应 该 使 用 最 后 一 个 结 
点 中 定义 的 颜色 。 然 而 ，Blink 和 WebKit 浏览 器 会 忽略 最 后 
一 个 结 点 ， 而 使 用 darkMagenta 来 填充 剩 下 的 空间 。 


为 了 使 浏览 器 之 间 有 相同 的 结果 ， 避 免 在 0% 和 100% 的 偏 
移 处 使 用 锐利 的 过 渡 。 


图 7-6 中 的 图 片 可 以 使 用 单个 连续 渐变 来 填充 背景 ,然后 通过 复杂 的 路 径 来 
在 夕阳 之 上 创建 开 着 的 阳台 门 形状 。 相 反 ， 灰 色 门 框 实际 上 是 背景 唯一 可 见 
的 地 方 ， 窗 户 和 开放 区 域 其 实 是 在 它 上 面 绘制 的 长 方形 。 它 们 外 观 一 致 是 因 
为 它们 都 是 用 相同 的 连续 渐变 来 填充 。 但 是 ， 请 记 住 “ 用 户 空间 ”依然 不 是 
一 个 绝对 的 坐标 系 ， 它 会 被 任何 变换 或 应 用 在 填充 形状 的 瞳 套 坐标 系 所 影响 。 











所 有 浏览 器 都 会 把 变换 应 用 到 用 户 空间 泻 染 服务 上 ， 但 髓 套 
的 坐标 系 更 加 古怪 。WebKit、Blink 和 下 使 用 渐变 的 父 级 
SVG， 而 不 是 形状 ， 来 把 百分比 转换 为 用 户 单位 。 





css 5 SVG 
使 用 关键 词 来 设置 CSS 渐变 的 位 置 
正如 第 6 章 中 说 的 那样 ，CSS 线性 渐变 的 默认 方向 是 从 上 到 下 。 当 然 你 也 
可 以 改变 它 的 默认 方向 。 它 的 语法 与 SVG 完全 不 同 ， 且 与 早期 试验 性 的 
CSS 渐变 也 有 相当 多 的 不 同 ; 为 了 尽 可 能 地 支持 早期 的 浏览 器 ， 你 可 能 需 
要 使 用 一 个 CSS 预 处 理 程序 或 脚本 来 把 你 的 渐变 重 构 为 旧 的 语法 。 


要 想 改变 CSS 渐变 的 方向 ， 需 要 在 函数 中 颜色 结 点 之 前 添加 一 个 额外 的 参 
数 。 要 创建 整整 齐 齐 从 一 边 到 另 一 边 、 从 一 个 角 到 另 一 个 角 的 渐变 ， 你 可 
以 使 用 关键 词 : 第 一 个 关键 词 是 to， 接 着 是 left, right, top 或 bottom 之 
一 来 表示 边 ， 也 可 以 是 这 些 关键 词 的 组 合 (例如 top right) 表示 角 。 这 些 
关键 词 描 述 的 是 渐变 的 终点 (也 就 是 渐变 要 往 哪个 方向 )， 起 点 在 相反 一 侧 
或 相对 的 角 。 


当 使 用 角 来 表示 时 ， 渐 变 过 渡 的 角度 会 被 调整 ， 所 以 渐变 50% 偏 移 位 置 点 
连接 着 另外 的 角 。 虽 然 规范 中 实现 的 方式 不 同 ， 但 它 的 效果 和 对 象 边 界 盒 
单位 中 角 到 角 的 SVG 渐变 效果 一 样 。 


例 7-4 直接 比较 了 例 7-2 中 SVG 对 角 渐 变 (作为 图 片 吝 入 ) 和 一 个 相似 的 
CSS 渐变 (在 网 页 的 body 上 )。CSS 渐变 中 的 to bottom Left， 意 思 是 它 起 
始 于 右上 角 。 图 7-7 显示 了 最 终 效 果 ， 包 括 内 识 的 SVG HE. 


例 7-4 使 用 CSS 创建 对 角 条 纹 渐变 
<!DOCTYPE html> 
<html xml:lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Positioning CSS gradients using keywords</title> 
<style type='text/css'> 
html, body { 
height: 100%; 
margin: 0; padding: 0; 
} 
body { 
background: linear-gradient(to bottom left, 
white, red 50%, blue 50%, white); 
} 
img { 
position: absolute; 
width: 50%; height: 50%; l 
eft: 25%; top: 25%; 
} 
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</style> 
</head> 
<body> 
<img src="gradient-vector-diagonals.svg"> 
</body> 
</html> 





ll 














7-7: 把 一 个 CSS 渐变 作为 一 个 SVG 渐变 的 背景 


这 个 以 及 其 他 CSS 渐变 都 是 Firefox 中 的 截图 。 编 写本 书 时 ， 
Blink 浏览 器 在 渔 染 CSS 渐变 中 沿 着 对 角 线 的 急剧 转换 ， 万 
其 是 像 本 例 中 这 种 大 型 背景 时 ， 性 能 很 差 ， 对 角 线 会 参差 不 
齐 。 这 个 问题 在 SVG 渐变 中 有 所 消减 ， 但 并 没有 完全 消除 。 


对 于 较 小 的 图 片 ， 通 过 一 两 个 百分比 点 来 分 隔 结 点 偏 移 能 取 
得 可 接受 的 结果 ， 这 样 就 强制 创建 一 个 抗 混 登 的 效果 。 但 像 
这 样 整个 页 面 的 渐变 ， 只 能 创造 锯齿 状 的 紫色 线 。 


在 CSS 中 ， 你 无 法 控制 渐变 矢量 的 长 度 ， 线 性 渐变 通常 会 被 从 角 到 角 调 整 
到 刚好 适合 图 片区 域 。 如 果 要 在 内 容 两 侧 创 建 纪 色 块 ， 或 扩展 渐变 溢出 侈 
子 ， 你 可 以 通过 调整 第 一 个 和 最 后 一 个 结 点 的 偏 移 值 来 实现 。 在 讨论 SVG 
渐变 时 我 们 曾 提 过 ， 调 整 渐变 矢量 长 度 和 调整 偏 移 的 值 之 间 的 不 同 对 重复 
渐变 很 重要 。 

CSS 渐变 总 是 创建 长 方形 图 片 ， 所 以 它 没有 复杂 的 对 象 边界 金 。 然 而 ， 如 
果 你 使 用 圆 角 边框 或 裁剪 来 减少 图 片 的 可 见 区 域 ， 这 将 裁减 掉 渐 变 中 类 似 
于 SVG 中 的 圆 和 其 他 图 形 的 角 。 


CSS 中 没有 直接 对 应 用 户 空 间 渐 变 的 定义 。 对 于 背景 图 片 ， 你 可 以 使 用 
background-attachment: fixed 来 实现 相似 的 效果 。 








7.4 E, Z 


本 章 的 开头 我 们 提 到 过 SVG 中 有 两 种 控制 线性 渐变 方向 的 方式 。 第 二 种 方 
式 是 使 用 gradientTransforn 属性 。 

gradientTransform 属性 的 值 是 可 以 控制 形状 位 置 和 方向 的 相同 变换 函数 的 
列表 : 

。 translate(tx,ty) 仅 改 变 位 置 而 不 会 扭曲 

。 scale(s) 或 scale(sx,sy) 放大 、 缩 小 、 拉 伸 或 翻转 成 镜像 

。 rotate(a) 或 rotate(a,cx,cy) 围绕 原点 或 指定 点 进行 旋转 

。 skewX(a) 或 skewY(a) 沿 着 轴 或 其 他 线 倾斜 


可 以 串联 列 出 任意 多 个 这 些 国 数 。 

















聚焦 未 来 

使 用 CSS 规则 来 变换 渐变 
CSS Transforms Module 把 gradientTransform 这 个 表现 属性 映射 到 了 新 的 
CSS 样式 变换 属性 。 虽 然 目 前 还 没有 浏览 器 支持 ， 但 在 未 来 ， 你 将 可 以 在 
渐变 元 素 上 设置 变换 样式 ， 其 效果 会 与 gradientTransform 属性 相同 。 
CSS 变换 的 语法 与 SVG 中 稍微 有 些 不 同 ，CSS 中 长 度 值 和 角度 值 需要 设置 
单位 ， 但 SVG 1.1 中 这 些 值 通常 定义 为 数字 。 新 模块 中 引入 了 新 的 简写 的 
变换 函数 ， 例 如 transtLateY 和 scalex; 还 废 齐 了 三 个 值 的 旋转 函数 (CSS 
中 不 能 使 用 ) ， 取 而 代 之 的 是 一 个 单独 的 transform-origin 属性 ， 它 将 会 影 
响 渐 变 变 换 的 效果 。 
CSS Transforms Module 还 引入 了 三 维 变换 函数 。 但 它们 不 适用 于 洽 染 服务 ， 
并 且 会 导致 整个 变换 列表 失效 。 

















通过 变换 线性 渐变 创建 的 效果 与 操作 渐变 矢量 创建 的 效果 类 似 。 对 于 任意 
给 定 的 图 形 ， 它 们 中 总 有 一 个 更 加 易于 计算 。 














你 可 以 结合 使 用 位 置 属性 和 变换 。 变 换 形状 时 ， 位 置 属性 可 
以 在 变换 坐标 系 中 计算 。 
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变换 一 个 渐变 是 什么 意思 呢 ? 它 的 意思 是 这 娄 服 务 创 建 的 墙纸 在 裁剪 为 要 
填充 的 形状 之 前 进行 了 变换 。 相 比 之 下 ， 当 你 变换 一 个 使 用 渐变 填充 的 形 
状 时 ， 形 状 和 渐变 都 会 被 变换 。 


图 7-8 比较 了 在 变换 和 未 变换 的 形状 中 使 用 变换 和 未 变换 渐变 的 两 种 效果 。 
例 7-5 是 对 应 的 代码 。 


例 7-5 变换 中 的 形状 和 渐变 
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xLink="http: //www.w3.org/1999/xlLink" 
width="400" height="500" viewBox="0,0 400,500"> 
<title xml:Lang="en">Transforming shapes, gradients, or both 
</title> 





<LinearGradient id="stripe" x2="0" y2="100%"> (1) 
<stop offset="0" stop-color="yellow"/> 
<stop offset="0.1" stop-color="gold"/> 
<stop offset="0.5" stop-color="tomato"/> 
<stop offset="0.5" stop-color="blueViolet"/> 
<stop offset="0.9" stop-color="indigo"/> 
<stop offset="1" stop-color="midnightblue"/> 


</lLinearGradient> 

<linearGradient id="stripe-transformed" xlink:href="#stripe" 
gradientTransform="skewY(25)" /> (2) 

<g fill="url(#stripe)" > © 


<rect height="190" width="190" x="5" y="5" /> 
<rect height="190" width="190" x="5" y="5" 
transform="translate(200,0) skewY(25)"/> @ 
</g> 
<g transform="translate(0,200)" 
fill="url(#stripe-transformed)"> 
<rect height="190" width="190" x="5" y="5" /> 
<rect height="190" width="190" x="5" y="5" 
transform="translate(200,0) skewY(25)"/> © 


© 


</g> 
</svg> 


@ 基础 渐变 使 用 位 置 属性 来 定义 从 上 到 下 的 方向 : 起 始点 是 默认 的 (0,0)， 
终点 是 〈0,100% ) 。 

@ 第 二 个 渐变 使 用 xlink:href 属性 来 复制 相同 的 颜色 结 点 图 案 ， 
gradientTransform 属性 用 于 把 图 案 进 行 倾斜 变换 。 


© 前 两 个 <rect> 元 素 被 分 为 一 组 来 使 用 相同 的 填充 值 。 它 们 都 会 使 用 未 变 
换 的 渐变 来 填充 。 











N 

















O 第 二 个 正方 形 先 水 平移 到 图 形 的 右上 部 分 ， 然 后 再 倾斜 。 但 它 填 充 所 使 
用 的 渐变 本 身 没 有 倾斜 ， 所 以 颜色 结 点 依然 完全 与 正方 形 的 顶部 和 底部 
边缘 对 齐 。 

O 下 面 一 行 的 正方 形 使 用 了 变换 之 后 的 渐变 ， 左 边 的 正方 形 本 身 没 有 倾斜 ， 
而 只 倾斜 了 渐变 。 


O 最 后 一 个 正方 形 本 身 是 倾斜 的 ， 且 使 用 倾斜 的 渐变 填充 。 所 以 最 终 渐变 
角度 是 混合 之 后 的 效果 。 


























图 7-8: 倾斜 渐变 和 正方 形 ; 未 变换 的 渐变 (E) 和 倾斜 后 的 渐变 (下 ) 
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形状 的 变换 会 维持 渐变 颜色 和 形状 边缘 之 间 的 关系 : 图 7-8 中 同一 行 的 正方 

形 对 应 的 角 都 有 相同 的 颜色 ， 而 不 管 形状 整体 是 否 被 倾斜 。 相 比 之 下 ， 当 

渐变 被 变换 时 ， 它 会 独立 于 形状 变换 ， 改 变 渐变 的 可 见 部 分 。midnightblue 

颜色 几乎 完全 被 切 掉 ， 而 纯 黄 色 则 大 部 分 是 可 见 的 。 

没有 直接 的 方式 可 以 只 变换 形状 而 不 变换 填充 它 的 泻 当 服务。 即使 是 

userSpaceOnUse 渐变 ， 也 会 在 使 用 它 的 形状 的 坐标 系统 变换 中 反映 出 来 。 
如 果 要 在 变换 的 形状 内 使 用 未 变换 的 泻 染 服务 ， 可 以 使 用 裁 
前 路 径 来 使 变换 形状 的 边界 正好 放 在 一 个 更 大 的 、 使 用 泻 染 
服务 填充 的 未 变换 的 长 方形 内 。 





倾斜 显然 是 渐变 变换 来 创建 对 角 渐变 的 一 种 方式 。 旋 转 是 另 一 种 方式 。 例 
7-6 创建 了 彩虹 渐变 并 将 它 间隔 45 度 进行 旋转 ， 之 后 用 生成 的 渐变 分 别 填 
E SVG 边 和 和 角 周 围 的 椭圆 。 最 终结 果 如 图 7-9 所 示 。 


例 7-6 使 用 旋转 变换 渐变 
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http: //www.w3.0rg/1999/xlink" 
width="400" height="300" viewBox="-200,-150 400,300"> @ 
<title xml: lang="en">Rotated Gradients</title> 
<defs> 
<linearGradient id="rainbow" > 
<stop stop-color="darkViolet" offset="0"/> 
<stop stop-color="blue" offset="0.143"/> © 
<stop stop-color="cyan" offset="0.286"/> 
<stop stop-color="LimeGreen" offset="0.429"/> 
<stop stop-color="yellow" offset="0.572"/> 
<stop stop-color="orange" offset="0.715"/> 
<stop stop-color="red" offset="0.857"/> 
<stop stop-color="maroon" offset="1"/> 
</linearGradient> 
<linearGradient id="rainbow45" xlink:href="#rainbow" 
gradientTransform="rotate(45)"/> © 
<linearGradient id="rainbow90" xlink:href="#rainbow" 
gradientTransform="rotate(90)"/> 
<linearGradient id="rainbow135" xlink:href="#rainbow" 
gradientTransform="rotate(135)"/> 
<linearGradient id="rainbow180" xlink:href="#rainbow" 
gradientTransform="rotate(180)"/> 
<linearGradient id="rainbow225" xlink:href="#rainbow" 
gradientTransform="rotate(225)"/> 
<linearGradient id="rainbow270" xlink:href="#rainbow" 
gradientTransform="rotate(270)"/> 


























<linearGradient id="rainbow315" xlink:href="#rainbow" 
gradientTransform="rotate(315)"/> 
</defs> 


<ellipse rx="60" ry="40" cx="130" cy="0" 
fill="url(#rainbow)"/> (4) 

<ellipse rx="60" ry="40" cx="130" cy="100" 
fill="url(#rainbow45)"/> 

<ellipse rx="60" ry="40" cx="0" cy="100" 
fill="url(#rainbow90)"/> 

<ellipse rx="60" ry="40" cx="-130" cy="100" 
fill="url(#rainbow135)"/> 

<ellipse rx="60" ry="40" cx="-130" cy="0" 
fill="url(#rainbow180)"/> 

<ellipse rx="60" ry="40" cx="-130" cy="-100" 
fill="url(#rainbow225)"/> 

<ellipse rx="60" ry="40" cx="0" cy="-100" 
fill="url(#rainbow270)"/> 

<ellipse rx="60" ry="40" cx="130" cy="-100" 
fill="url(#rainbow315)"/> 

</svg> 


7-9: 用 旋转 渐变 填充 的 椭圆 
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@ SVG 使 用 以 原点 为 中 心 的 坐标 系 。 
O 彩虹 渐变 拥有 八 个 结 点 ， 所 以 偏 移 都 是 1/7 (0.143) 的 倍数 。 


© 使 用 xlink:href 来 引用 源 渐变 来 生成 几乎 一 样 的 渐变 ， 然 后 给 它 添加 新 
的 属性 : 本 例 中 是 gradientTransform。 


O 源 渐变 使 用 默认 方向 从 左 到 右 排 列 ， 使 用 该 渐变 填充 的 椭圆 的 位 置 在 
SVG 的 右 侧 边 上 。 剩 余 的 椭圆 围绕 SVG 按照 顺 时 针 的 方向 放置 ， 并 与 
沿 顺 时 针 方向 依次 增加 的 渐变 变换 角度 相对 应 。 


等 等 ， 为 什么 一 些 形状 是 使 用 纯 紫 罗兰 色 填 充 而 不 是 使 用 渐变 填充 的 ?这 
是 因为 椭圆 是 围绕 SVG 坐标 系 的 中 心 排列 的 ， 而 渐变 是 围绕 它们 各 自 的 对 
象 边界 盒 坐标 的 中 心 来 旋转 的 。 正 如 所 有 的 SVG 坐标 系 一 样 ， 它 的 默认 原 
点 是 左上 角 ,， 但 是 渐变 没有 viewBox 属性 来 改变 它 。 


渐变 矢量 (初始 状态 下 ， 沿 着 每 个 形状 的 边界 盒 的 顶部 从 左 到 右 ) 是 围绕 
每 个 盒子 的 原点 (左上 角 ) 来 旋转 的 。 把 渐变 矢量 旋转 90 度 (如 底部 中 间 
的 椭圆 所 示 ) 将 会 使 渐变 从 上 到 下 改变 。 然 而 ， 再 进一步 旋转 的 话 ， 渐 变 
矢量 将 会 指向 形状 边界 盒 的 外 部 。 形 状 的 大 部 分 或 全 部 在 渐变 起 始 之 前 的 
区 域 中 ， 所 以 会 使 用 第 一 个 渐变 结 点 中 定义 的 颜色 (上述 中 的 darkviolet) 


HBR. 


为 了 有 效 地 在 对 象 边 界 盒 中 使 用 线性 渐变 的 旋转 变换 ， 你 需要 一 些 额 外 的 
操作 。 有 以 下 可 选 方式 。 

把 gradientTransform 属性 的 值 翻译 为 位 置 属性 来 在 形状 内 重新 定位 渐变 。 
使 用 三 个 值 的 rotate(a, 0.5, 0.5) 国 数 来 使 其 围绕 坐标 系 的 中 心 点 旋转 
(如 果 使 用 CSS 规则 ， 也 可 以 使 用 transform-origin 属性 ) 。 
改变 矢量 的 位 置 属 性 ， 这 样 旋转 后 它 就 可 以 沿 着 原点 正确 的 一 侧 。 

还 有 更 复杂 的 问题 ， 尽 管 你 已 经 变换 了 渐变 的 方向 ， 但 是 旋转 并 不 能 改变 
它 的 长 度 ， 结 点 的 偏 移 值 依 然 是 相对 于 新 变 矢 量 水 平 长 度 来 计算 的 。 由 于 
对 象 边 界 盒 坐 标的 扭曲 变形 ， 水 平 渐变 的 默认 长 度 (1 水 平 单位 ) 在 旋转 
90 度 之 后 ， 依 然 会 填充 垂直 的 盒子 (1 个 垂直 单位 )。 然 而 ， 它 将 无 法 匹配 
旋转 45 度 之 后 的 对 角 长 度 ( 拉 伸 为 1.141 个 单位 )， 所 以 50% 的 偏 移 将 不 
能 正好 连接 盒子 的 另外 两 个 角 。 

换 名 话说， 渐变 旋转 的 时 候 会 拉 伸 或 收缩 ， 但 可 能 不 是 按照 你 预期 的 方式 。 
如 果 你 在 渐变 上 使 用 userSpaceOnuUse 单位 ， 它 将 会 围绕 整个 SVG 坐标 系 的 
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原点 〈 本 例 中 ， 图 片 的 中 心 点 ) 旋转 。 图 7-10 显示 了 这 种 效果 。 相 对 于 例 
7-6， 代 码 中 唯一 的 修改 是 主要 渐变 元 素 的 属性 : 
<linearGradient id="rainbow" gradientUnits="userSpaceOnUse" 
x1="20%" x2="50%"> 





x1 和 x2 的 值 必须 改变 ， 因 为 现在 百分比 将 会 根据 SVG 的 宽度 而 不 是 形状 
的 宽度 来 计算 。 这 些 新 的 属性 只 需要 设置 一 次 ， 它 们 会 自动 被 复制 到 所 有 
引用 它 的 元 素 上 。 

如 果 你 仔细 看 ， 图 7-9 和 图 7-10 还 有 另外 一 个 不 同 之 处 。 为 了 看 得 更 清楚 
一 些 ， 图 7-11 取出 每 个 图 形 中 右 下 角 的 椭圆 (使 用 rotate(45) 渐变 变换 的 
椭圆 ) 。 左 侧 的 椭圆 使 用 对 象 边 界 盒 渐变 ， 而 右 侧 的 椭圆 使 用 的 是 用 户 空间 
坐标 。 它 们 的 角度 不 完全 相同 。 使 用 对 象 边界 盒 的 渐变 ，45 度 看 起 来 更 像 
旋转 了 60 BE. 


图 7-10: 使 用 在 用 户 空间 旋转 的 渐变 填充 椭圆 



























































这 是 因为 变换 角度 是 在 对 象 边界 盒 创建 的 拉 伸 坐标 系 内 计算 的 。 如 果 长 方 
形 边界 大 致 上 是 一 个 正方 形 ， 最 终 的 角度 将 和 你 定义 的 角度 一 样 。 如 有 果 不 
是 下 方形， 就 像 这 些 椭圆 一 样 ， 角 度 将 会 相应 地 压缩 或 拉 伸 。 对 象 边界 盒 
的 45 度 通常 正好 是 盒子 的 对 角 线 ， 但 是 在 其 他 坐标 系 中 ， 将 不 一 定 匹 配 相 
同 的 角度 。 
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图 7-11: 比较 渐变 在 对 象 边界 盒 空间 (£) 和 用 户 坐 标 空间 (6) 内 旋转 的 结果 


CSS 与 SVG 
使 用 角度 定位 CSS 渐变 


CSS 渐变 同样 可 以 使 用 旋转 角度 来 定位 ， 但 是 结果 与 SVG 中 有 所 不 同 。 


你 可 以 使 用 带 单位 的 角度 作为 linear-gradient 有 函数 的 第 一 个 参数 ， 来 代替 
方向 关键 词 。 由 于 默认 方向 是 从 上 到 下 ， 角 度 是 相对 于 朝 下 的 垂直 夭 量 来 
计算 的 ， 为 了 创建 SVG 默认 的 指向 右 侧 的 渐变 ， 必 须 把 它 设置 为 -90 度 。 


例 7-7 改编 自 例 7-4， 它 比较 的 不 是 CSS 渐变 和 SVG 渐变 ， 而 是 两 种 CSS 
渐变 。<body> 上 的 渐变 使 用 的 是 to 角 的 语法 来 倾 针 ， 而 内 部 的 <div> 元 素 
上 的 渐变 使 用 角度 来 倾斜 。 最 终 的 网 页 如 图 7-12 所 示 。 


例 7-7 使 用 角度 而 非 关 键 词 来 控制 CSS 渐变 
<!DOCTYPE htmL> 
<html Lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Angling CSS gradients versus using corners</title> 


<style type='text/css'> 
html, body { 

height: 100%; 

margin: 0; padding: 0; 


body { 
background: linear-gradient(to bottom left, 
white, red 50%, blue 50%, white); 
} 
div { 
background: linear -gradient(-45deg, 





white, red 50%, blue 50%, white); 
position: absolute; 
width: 50%; height: 50%; 
left: 25%; top: 25%; 


</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 





P 


= 














图 7-12; 在 角 到 角 的 CSS 渐变 上 放置 一 个 固定 角度 的 渐变 


使 用 角度 定义 的 渐变 会 精确 地 使 用 定义 的 角度 绘制 ， 即 使 这 意味 着 50% 的 
结 点 不 再 连接 元 素 的 左下 角 和 右上 角 。 渐 变 矢量 的 长 度 和 位 置 会 自动 调整 ， 
所 以 渐变 依然 从 左上 角 开 始 到 右 下 角 结 束 。 再 次 说 明 ， 创 建 不 在 角 上 起 始 
和 终止 的 CSS 渐变 的 唯一 方式 是 调整 个 别 颜色 结 点 的 偏 移 值 。 
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在 第 7 章 中 操作 渐变 矢量 和 渐变 变换 时 ， 我 们 曾 数 次 指出 超出 渐变 矢量 的 
区 域 会 被 填充 为 纯色 ， 也 提 到 这 只 是 默认 行为 。 

本 章 会 探讨 替代 的 方案 一 重复 渐变 ， 它 变换 尽 可 能 多 的 次 数 来 填充 形状 。 
同样 ，SVG 和 CSS 都 可 以 实现 这 种 效果 ， 我 们 也 会 对 两 者 进行 对 比 。 

基于 现在 已 经 介绍 的 线性 渐变 的 所 有 属性 ， 该 章 最 后 将 介绍 一 些 关 于 SVG 
渐变 常见 的 一 个 用 途 (但 不 幸 的 是 ， 也 有 很 多 问题 ) 的 例子 : 在 HTML 页 
面 中 设 定 重 复 使 用 的 SVG 图 标的 样式 。 如 有 果 想 要 达到 预期 结果 ， 你 需要 避 
免 Web 浏览 器 中 的 一 些 bug。 


8.1 如 何 扩展 渐变 


超出 渐变 矢量 终点 部 分 的 新 变 外 观 可 以 通过 <linearGradient> 元 素 上 
spreadMethod 属性 的 值 来 设置 。 它 控制 着 渐变 如 何 无 限 扩展 。 


该 属性 的 默认 值 是 pad。 矢 量 之 前 的 部 分 都 使 用 第 一 个 stop-cotor 的 值 来 
填补 ， 而 矢量 终点 之 后 的 部 分 都 使 用 最 后 一 个 stop-color 的 值 来 填补 。 我 
们 之 前 看 到 的 例子 使 用 的 都 是 默认 的 填补 行为 ， 例 8-1 中 明确 设置 了 该 值 ， 
x1 和 x2 属性 把 渐变 限制 在 对 象 边 界 盒 中 间 的 10%， 但 是 形状 剩 下 的 部 分 将 
会 被 蓝 色 和 粉红 色 填 补 。 渐 变 结果 如 图 8-1 所 示 。 
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8-1: PAER 
例 8-1 使 用 填补 渐变 来 填充 形状 


<svg xmLns="http://www.w3.org/2000/svg" 
width="4in" height="1in"> 
<title xml: lang="en">Padded Gradient</title> 
<LinearGradient id="divider" spreadMethod="pad" 
x1="45%" x2="55%" > o 
<stop stop-color="lightSteelBlue" offset="0%"/> 
<stop stop-color="darkRed" offset="50%"/> 


<stop stop-color="salmon" offset="100%"/> (2) 
</linearGradient> 
<rect width="100%" height="100%" fill="url(#divider)" /> 


</svg> 
@ 你 不 需要 设 定 spreadMethod 的 值 ， 因 为 pad 是 默认 值 ， 这 里 是 为 了 突出 它 。 
O 注意 结 点 的 偏 移 值 是 渐变 矢量 长 度 的 百分比 ， 而 不 是 对 象 边 界 盒 或 用 户 
空间 的 百分比 。 
spreadMethod 属性 的 其 他 可 选 值 有 repeat 和 reflect。 这 两 个 值 都 会 导致 
渐变 重复 尽 可 能 多 的 次 数 来 填充 形状 。 
WebKit (Safari 浏览 器 和 旧版 本 的 Chrome) 不 支持 spreadMethod 
属性 的 repeat 和 reflect 值 。Firefox 暂时 在 改变 底层 代码 时 
不 支持 重复 和 映射 的 渐变 ， 它 们 在 2014 年 的 32 版 本 中 再 次 
引入 。 当 不 支持 时 ， 所 有 的 渐变 都 按照 填补 闫 色 来 泻 染 。 
如 果 重 复 效果 对 于 你 的 图 形 来 说 必 不 可 少 ， 你 有 两 种 解决 办 法 : 
。 尽 可 能 多 次 地 手动 重复 渐变 结 点 (并 调整 渐变 矢量 的 尺寸 ) 
来 填充 你 的 形状 ; 
。 使 用 <pattern> 元 素 (第 10 章 中 介绍 ) 来 创建 重复 渐变 纹理 。 








8.2 ”无穷 渐变 映射 


reflect 方法 在 每 个 重复 周期 内 ， 都 会 反 转 结 点 的 顺序 。 这 会 在 起 始点 和 终 
点 之 间 有 一 个 平 请 的 过 渡 ， 在 定义 的 颜色 交替 时 不 会 有 任何 不 连续 的 感觉 。 
颜色 在 波峰 和 波 谷 之 间 交 替 。 

在 例 8-1 的 基础 上 将 spreadMethod 属性 的 值 修改 为 reflect， 结 果 如 图 8-2 
所 示 。 





























B 8-2: 在 两 侧 映射 狭 窜 的 渐变 

尽管 中 间 的 渐变 与 图 8-1 中 完全 一 样 ， 但 当 渐 变 区 域 重 复 和 映射 时 ， 在 视 
觉 上 的 效果 会 有 不 同 ， 看 起 来 就 像 一 个 颜色 交替 的 金属 管 。 需 要 注意 的 是 ， 
重复 发 生 在 你 指定 的 渐变 向 量 之 前 和 之 后 两 个 方向 上 。 

映射 渐变 的 效果 很 大 程度 上 会 受到 渐变 矢量 长 度 和 色彩 对 比 度 级 别 的 影响 。 
图 8-2 创建 了 一 个 更 精妙 、 波 纹 状 的 映射 渐变 ， 如 图 8-3 所 示 。 





























B 8-3: 映射 三 种 颜色 的 渐变 
例 8-2 使 用 映射 渐变 来 创建 一 个 平滑 重复 的 图 案 


<svg xmlns="http://www.w3.org/2000/svg" 
width="4in" height="1in"> 
<title xml:lang="en">Reflecting Gradient</title> 
<linearGradient id="waves" spreadMethod="reflect" 
x2="10%" y2="10%"> 
<stop stop-color="darkGreen" offset="0"/> 
<stop stop-color="mediumSeaGreen" offset="50%"/> 





<stop stop-color="skyBlue" offset="100%" /> 
</linearGradient> 
<rect width="100%" height="100%" fill="url(#waves)" /> 
</svg> 


渐变 矢量 沿 着 对 角 线 从 左上 角 (默认 的 x1 和 yl 值 ) 指向 10% 位 置 的 点 。 
这 是 单独 一 个 渐变 在 单个 周期 的 距离 。 因 此 所 得 到 的 形状 有 5 对 ( 共 10 次 
循环 ) 交替 的 渐变 ， 沿 着 对 角 线 从 绿 到 蓝 交 替 。 


8.3” 非 映射 重复 


映射 浙 变 创建 了 平 谓 地 从 一 种 颜色 变换 为 另 一 种 颜色 然后 再 变换 回来 的 效 
果 。 相 比 之 下 ， 当 spreadMethod 的 值 为 repeat 时 ， 渐 变 结 点 会 从 始 至 终 以 相 
同 的 顺序 重复 。 除 非 开 始 和 结束 的 颜色 相同 ， 否 则 会 导致 渐变 看 起 来 不 连续 。 


我 们 依然 采用 例 8-1 中 的 代码 ， 并 使 用 spreadMethod="repeat"， 能 够 清晰 
地 看 到 它们 之 间 的 差异 。 结 果 如 图 8-4 所 示 。 

















B 8-4: 在 两 侧重 复 的 狭窄 渐 变 
一 个 明显 的 不 同 是 现在 每 个 渐变 周期 的 边缘 都 创建 了 锐利 的 线条 ， 就 好 像 
你 看 到 的 是 手风琴 的 福子， 每 侧 的 光线 都 不 同 。 


重复 渐变 在 创建 条 纹 效果 时 非常 有 用 。 例 8-3 利用 这 一 优点 创建 了 一 个 条 纹 
的 背景 效果 ， 如 图 8-5 所 示 。 

















8-5: 使 用 重复 渐变 创建 的 条 纹 背 景 





Gil 8-3 使 用 重复 渐变 创建 一 个 条 纹 图 案 
<svg xmlns="http://www.w3.org/2000/svg" 
width="4in" height="1in"> 
<title xml: lang="en">Repeating Gradient</title> 
<linearGradient id="wallpaper" spreadMethod="repeat" 
gradientUnits="userSpaceOnUse" 
x1="5px" x2="45px"> 
<stop stop-color="indigo" offset="50%" /> 
<stop stop-color="deepSkyBlue" offset="50%" /> 
<stop stop-color="lLightSkyBlue" offset="90%" /> © 
</linearGradient> 
<rect width="100%" height="100%" fill="url(#wallpaper)" /> 
</svg> 


@ 渐变 使 用 用 户 空间 单位 来 确定 尺寸 ， 所 以 每 个 渐变 周期 的 宽度 可 以 使 用 
绝对 单位 来 定义 ， 而 不 是 使 用 引用 形状 的 百分比 定义 。 渐 变 矢量 是 水 平 
的 (yl 和 y2 都 使 用 默认 的 0)， 每 个 周期 的 宽度 是 40px， 也 就 是 与 xl 
和 x2 之 间 的 差 值 。 


O 第 一 个 结 点 在 循环 的 中 间 位 置 (50% 偏 移 )， 每 个 循环 周期 起 始点 和 偏 
移 之 间 的 空白 会 使 用 第 一 个 结 点 的 颜色 填补 。 换 名 话说 ， 每 一 个 重复 周 
期 的 前 半 部 分 都 是 使 用 indigo 填充 的 纯色 条 纹 。 

© 在 50% 偏 移 的 位 置 颜色 急剧 变 为 蓝 色 后 ， 一 直到 90% 偏 移 的 位 置 浅 蓝 
色 有 一 个 细微 的 浙 变 ， 循 环 周期 的 剩余 部 分 将 会 使 用 浅 蓝 色 填 充 。 

例 8-3 还 演示 了 我 们 在 第 7 章 中 提 到 的 一 些 内 容 : 不 设置 渐变 矢量 的 起 始 或 

终止 位 置 的 结 点 与 改变 矢量 的 长 度 是 不 同 的 (在 重复 或 映射 渐变 中 ) 。 颜 色 

是 在 <stop> 和 矢量 终点 之 间 填 补 的， 而 重复 是 应 用 在 矢量 本 身上 的 。 


0 
© 








CSS 与 SVG 
重复 CSS 渐变 
repeating-linear-gradient() 函数 用 于 创建 CSS 中 的 重复 线性 渐变 。 参 数 
与 常规 的 线性 渐变 是 一 样 的 : 一 个 方向 参数 (关键 词 或 角度 ) ， 接 着 是 颜色 
结 点 列表 。 


重复 CSS 渐变 在 许多 浏览 器 中 的 支持 都 晚 于 常规 的 渐变 。 但 
是 现在 所 有 主流 浏览 器 的 最 新 版 本 ， 包 括 Safari ( 不 支持 重 
复 SVG 渐变 ) 都 已 经 支持 。 


重复 部 分 完全 匹配 第 一 个 和 最 后 一 个 结 点 之 间 的 距离 。 为 了 看 到 重复 效果 ， 





你 需要 明确 设置 至 少 一 个 结 点 的 偏 移 ， 否 则 ， 单 个 周期 将 会 填 满 整个 CSS 
At ky & 
要 想 在 重复 之 间 创 建 纯色 块 ， 你 需要 提供 两 个 颜色 相同 的 结 点 。 例 如 ， 要 
创建 垂直 的 蓝 色 和 衣 蓝 色 条 纹 背 景 ， 代 码 如 下 : 
background: repeating-Linear-gradient(to right， 
indigo 5px, indigo 25px, 


deepSkyBlue 25px, 
LightSkyBlue 41px, LightSkyBlue 45px); 


重复 块 依然 是 40px 宽 ， 即 第 一 个 和 最 后 一 个 结 点 的 差 。 中 间 的 结 点 使 用 的 
也 是 px 值 。 如 果 你 使 用 的 是 百分比 值 ， 它 们 会 相对 于 CSS FHS RH 
变 重复 距离 来 计算 ， 完 全 不 计 缩 放 的 话 ，50% 的 偏 移 将 会 远大 于 45px 的 最 
终 偏 移 。 


CSS 中 没有 实现 映射 渐变 的 简单 方式 。 要 想 创 建 映 射 图 案 ， 你 需要 手动 复 
制 stop 来 创建 一 个 完整 的 重复 块 ， 代 码 如 下 : 
background: repeating-linear-gradient(to bottom right, 
darkGreen, mediumSeaGreen 5%, 


skyBlue 10%, 
mediumSeaGreen 15%, darkGreen 20%); 


本 例 中 ， 第 一 个 结 点 的 偏 移 是 默认 的 0， 因 此 重复 图 案 是 对 角 线 长 度 的 
20%， 与 例 8-2 中 的 往复 循环 一 样 。 


对 于 CSS 背景 中 的 水 平和 重 直 渐变 ， 你 还 可 以 使 用 background-size 来 定 
义 一 个 大 于 一 次 重复 的 背景 图 片 ， 并 使 用 background-repeat 属性 平 铺 填 充 
元 素 ， 以 此 来 创建 重复 渐变 的 效果 。 


相 比 于 repeating-Linear-graditent， 平 铺 的 方式 有 两 个 便利 之 处 。 你 可 以 
独立 于 重复 区 域 的 尺寸 ， 在 渐变 方向 上 使 用 百分比 作为 距离 ， 并 且 对 于 重 
复 区 域 起 始 和 结束 位 置 的 纯色 ， 你 不 需要 使 用 额外 的 结 点 。 例 如 ， 你 可 以 
使 用 如 下 简写 的 样式 规则 来 创建 背景 效果 : 
background: linear-gradient(to right, 
indigo 50%, 
deepSkyBlue 50%, 


LightSkyBlue 90%) 
5px 0/40px 100% repeat-x; 


如 果 你 想 要 改变 条 纹 的 宽度 或 偏 移 ， 现 在 只 需要 调整 一 个 值 (40px 100% 的 


background-size 的 值 用 于 设置 总 宽度 ，5px 0 49 background-position 的 值 
用 于 设置 偏 移 ) ， 而 不 用 去 修改 每 个 结 点 。 





基于 一 点 点 三 角形 学 ， 你 还 可 以 通过 这 种 方式 重复 对 角 渐 变 : 仔细 计算 出 
正确 的 background-size 来 创建 重复 的 磁 贴 (tile)， 但 是 舍 入 的 效果 可 能 会 
在 磁 贴 之 间 创 建 可 见 的 边 。 


8.4 在 HTML 中 使 用 〈 复 用 ) 渐变 


前 面 介绍 的 关于 渐变 的 例子 都 是 在 SVG 文件 中 使 用 渐变 来 填充 简单 的 形状 ， 
而 且 大 部 分 是 简单 地 直接 填充 占据 整个 图 形 的 长 方形 。 然 而 ， 随 着 CSS 渐 
变 的 广泛 支持 ， 使 用 简单 的 SVG 渐变 背景 的 情况 不 断 减 少 。 但 同时 ， 随 着 
浏览 器 支持 程度 的 提高 ， 其 他 SVG 图 形 的 使 用 场景 在 不 断 增多 。 这 包括 内 
St SVG 代码 ，HTML 文件 中 通过 主 文档 的 样式 表 添加 样式 的 标记 。 


渐变 可 以 用 在 图 标 、 图 表 或 其 他 HTML 页 面 内 的 SVG 代码 中 。 大 多 数 情况 
下 ， 它 的 运行 结果 与 在 单独 的 SVG 文档 中 一 样 ， 但 也 有 一 些 例外 ， 大 都 可 
以 归 因 于 浏览 器 的 bug。 


对 于 单个 比较 大 的 SVG 文件 例如， 数据 可 视 化 )， 所 有 的 SVG 代码 ， 包 
括 渐变 的 定义 ， 通 常 都 包含 在 一 起 。 


相 比 之 下 ， 对 于 SVG 图 标 系 统 ， 图 标 通 常 都 被 定义 一 次 ， 然 后 通过 <user> 
元 素 重 复 使 用 。 这 样 可 以 保持 你 的 页 面 结构 ， 且 使 得 主要 的 内 敛 标签 清晰 简 
洁 。 最 简单 情况 下 ， 每 个 图 标 实例 可 以 通过 仅 比 颈 入 图 片 稍 多 的 标签 来 表示 : 


<svg Class="icon"><use xlink:href="#star" /></svg> 


在 同一 文件 的 其 他 地 方 ， 添加 id="star" 的 <symbol> 标签 将 会 定义 实际 的 
形状 ， 它 将 会 被 缩放 到 适合 添加 icon 类 的 <svg> 元 素 的 大 小 。 


根据 不 同 的 使 用 情况 ， 你 可 能 需要 引入 一 个 标题 提示 、 可 访问 名 称 以 及 备 
用 的 文本 : 
<svg class="icon" role="img" aria-labelledby="icon-0001"> 
<use Xlink:href="#star"> 
<title>Tooltip</title> 
<desc id="icon-0001">Alternative Text</desc> 
</use> 
</svg> 
现代 浏览 器 中 <title> 中 的 内 容 将 作为 工具 提示 。<desc> 中 的 内 容 用 于 可 
访问 名 称 (因为 有 aria-labelledby 属性 ) 并 且 可 以 在 旧 的 不 支持 SVG 的 
浏览 器 中 显示 。 


















































每 个 <symbol> 中 的 原始 图 形 通 常 只 分 配 最 少 的 样式 规则 ， 这 样 它们 就 可 以 
继承 <use> 实例 上 设置 的 样式 ， 包 括 一 些 交 互 样式 ， 比 如 hover 和 focus 效 
果 。 这 些 样式 还 包括 引用 产 变 元 素 作为 填充 或 描 边 。 然 而 ， 正 如 之 前 在 第 
章 中 说 的 那样 ，URL 解析 规则 以 及 外 部 SVG 资源 的 低 支 持 也 避免 了 这 些 样 
式 在 外 部 样式 表 中 分 配 。 


在 除 Firefox 外 的 所 有 浏览 器 中 ， 演 染 服 务 与 图 形 必须 在 同一 
个 文档 中 ， 所 以 样式 规则 也 必须 定义 在 同一 文档 中 ， 而 不 是 



































在 外 部 样式 表 中 。 





理论 上 ， 外 部 样式 可 以 通过 urL() 引用 链接 到 主 文档 中 。 但 在 实践 中 ， 
与 外 部 样式 表 是 用 于 多 个 文档 中 重复 使 用 的 主要 用 途 相 矛 盾 。 


由 于 它们 不 能 集中 在 外 部 文件 中 ， 渐 变 本 身 通常 通过 它们 自己 <svg> 元 素 
内 的 不 在 屏幕 上 绘制 任何 东西 的 图 标定 义 来 收集 。( 它 们 必须 定义 在 <svg> 
元 素 内 才能 被 正确 解析 为 SVG 内 容 。) 


正如 我 们 介绍 用 户 空间 渐变 时 提 到 的 ， 除 Firefox 外 的 所 有 浏 
BA: 览 器 器 都 基于 渐变 元 素 的 父 级 <SVg> 来 缩放 userSpaceOnUse 渐 




















变 ， 而 不 是 被 绘制 的 形状 的 坐标 系 。 因 此 用 户 空间 渐变 在 使 
用 一 个 单独 的 SVG 定义 时 会 失效 。 
































为 了 获得 最 佳 的 浏览 器 支持 且 易 于 维护 标记 ，SVG 通常 放置 在 HTML 中 
<body> 的 顶部 。 


日 的 WebKit 浏览 器 不 能 正确 定位 symbol 和 其 他 一 些 文档 中 
定义 在 使 用 ia eee A 


理想 情况 下 ， 你 可 能 会 把 SVG 定义 与 其 他 不 显示 的 内 容 一 起 放置 在 HTML 
的 <head> 中 。 至 少 ， 你 也 可 以 使 用 display:none 来 保证 额外 的 SVG 不 会 
影响 你 的 网 页 。 但 这 两 个 方法 在 实践 中 都 不 可 用 。 


所 有 被 测试 浏览 器 在 渐变 的 祖先 元 素 的 display 设置 为 none 
时 都 不 会 演 染 渐变 (或 图 案 )， 尽 管 SVG 规范 中 明确 声明 









































display 不 应 该 有 任何 效果 。 这 是 SVG 在 跨 浏览 器 一 致 性 上 
最 令 人 诅 丧 的 一 个 例子 





所 以 ， 你 需要 使 用 替代 的 CSS 来 保证 SVG 定义 不 会 影响 你 的 网 页 ， 并 使 
用 ARIA 属性 来 确保 辅助 的 技术 不 会 处 理 它 。 此 外 ， 为 了 避免 CSS 加 载 时 
间 过 长 ， 你 可 能 还 需要 使 用 SVG 属性 来 摧毁 定义 元 素 的 大 小 。 最 后 ， 由 于 
IE KH T ACRE NY SVG 1.2 中 对 于 键盘 控制 SVG 的 提议 ， 你 还 需要 使 用 
focusable 属性 来 明确 告诉 它 SVG 不 应 该 成 为 键盘 的 焦点 。 
































Search the Site 
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图 8-6: HTML 页 面 中 使 用 渐变 来 填充 和 描 边 的 图 标 














在 正中 ，HTML 中 所 有 的 <svg> 元 素 默认 都 是 键盘 聚焦 的 ， 
只 能 通过 focusable="false" 来 从 tab 的 索引 中 删除 。 在 最 
新 版 本 的 WebKit/Blink 浏览 器 中 ，<svg> 元 素 默 认 是 键盘 不 
能 聚焦 的 ， 但 是 可 以 通过 给 tabindex 设置 一 个 正 的 值 来 使 它 
可 以 获得 焦点 。Firefox 没有 实现 任何 一 种 焦点 控制 的 方式 。 


























有 了 这 么 多 警示 ， 那 么 HTML 文件 中 给 SVG 图 标 使 用 渐变 的 结果 是 什么 样 
的 呢 ? 例 8-4 给 出 了 在 导航 菜单 中 使 用 SVG 图 标的 网 页 的 核心 标记 和 样式 。 
不 同 颜 色 的 渐变 用 于 区 分 导航 选项 中 的 当前 站 点 ， 以 及 指示 出 基 停 和 获得 























焦点 时 的 状态 。 图 8-6 显示 了 在 第 一 个 导航 链接 处 于 焦点 状态 的 样子 。 
例 8-4 HTML 页 面 内 使 用 渐变 的 SVG 图 标 
HTML 标记 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Re-using Symbols with Gradients</title> 
<style type='text/css'> 
/* styles must be included in the same document */ 
</style> 
</head> 
<body> 
<svg Class="defs-only" aria-hidden="true" focusable="false" 
width="0" height="0"> (1) 
<linearGradient id="silver-shine" spreadMethod="repeat" 
gradientTransform="rotate(40) scale(0.8)" > 
<stop offset="0" stop-color="gray" /> 
<stop offset="0.35" stop-color="silver" /> 
<stop offset="1" stop-color="gray" /> 
</linearGradient> 
<linearGradient id="gold-shine" 
xlink:href="#silver-shine" > (2) 
<stop offset="0" stop-color="gold" /> 
<stop offset="0.35" stop-color="lightYellow" /> 
<stop offset="1" stop-color="gold" /> 
</linearGradient> 
<symbol id="home" viewBox="0 0 200 200"> © 
<path d="M30,180 V80 H10 L100,10 190,80 H170 V180 
H90 V100 H60 V180 H30 Z 
M110,100 H150 V140 H110 Z" 
fill-rule="evenodd" /> 
</symbol> 
<symbol id="star" viewBox="10 10 170 150"> 
<path d="M100,10 L150,140 20,50 180,50 50,140 Z" /> 
</symbol> 
<symbol id="magnify" viewBox="0 © 200 200"> 
<path d="M10,170 L70,110 A60,60 0 1,1 90,130 L30,190Z 
M85,104 A44,44 0 1,1 96,116 Z" 
fill-rule="evenodd" /> 
<path d="M85,104 A44,44 0 1,1 96,116 Z" fill-opacity="0.7" /> 
</symbol> 
</svg> 
<a Class="skip-nav" href="#main">Skip to Main Content</a> 
<header> 
<hi>Gradients Gone Wild</hi> 
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<nav> 
<ul> 
<li><a href="/">HOME 
<svg class="nav-icon" role="presentation"> 
<use xlink:href="#home" /> (4) 
</svg> 
</a> 
</li> 
<li><a href="/favorites">Favorites 
<svg class="nav-icon" role="presentation"> 
<use Xlink:href="#star" /> 


</svg> 
</a> 
</li> 
<li><a title="(You are here)">Search © 
<svg class="nav-icon" role="presentation"> 
<use xlink:href="#magnify" /> 
</svg> 
</a> 
</li> 
</ul> 
</nav> 
</header> 


<main id="main"> 
<hi>Search the Site</hi> 
<form> 
<input type="search" name="q" 
aria-label="Enter Search Terms"/> 
<button type="submit" aria-label="Search"> 
<svg> 
<use xlink:href="#magnify" /> (6) 
GO 
</svg> 
</button> 
</form> 
</main> 
</body> 
</html> 


O 初始 的 <svg> 用 于 包含 复 用 内 容 的 定义 。 除 了 会 触发 CSS 隐藏 的 defs- 


only 类 外 ， 还 添加 了 aria-hidden="true" 属性 ， 并 设置 标记 的 宽 和 高 都 
2710. focusable="false" {Ë IE 浏览 器 不 能 通过 键盘 使 它 获 得 焦点 。 

@ 两 个 渐变 几何 上 完全 一 样 ，spreadMethod 和 gradientTransform 属性 在 
xLink:href 引用 的 时 候 将 会 复制 到 另 一 个 上 。 但 是 它们 的 颜色 不 同 ， 第 
二 个 渐变 中 <stop> 元 素 会 完全 替换 第 一 个 中 对 应 的 结 点 。 
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© =% <symbol> 元 素 用 于 定义 图 标 ， 每 个 都 有 viewBox 属性 ， 所 以 它们 将 
会 被 缩放 到 适合 背景 的 大 小 。 


O 在 主要 的 网 页 标记 中 ， 


每 个 导航 图 标 都 把 <svg> 艇 套 在 导航 列表 中 的 





<a> 元 素 内 。 单 独 的 <use> 元 素 用 于 引用 symbol, HF <user> 元 素 上 没 
有 位 置 属 性 ， 所 以 复 用 的 symbol 会 被 拉 伸 到 正好 适合 <svg> 的 大 小 。 


O 当前 页 面 表示 的 是 导航 列表 中 没有 href 属性 的 锚 元 素 ， 因 此 它 是 一 个 不 





合法 的 超 链接 。 





O 按钮 图 标的 标记 用 法 与 导航 中 类 似 ， 外 观 上 有 差异 是 因为 SVG 继承 样式 


和 缩放 不 同 。 在 现代 浏 








览 嚣 中， 按钮 中 没有 可 见 的 文字 ，aria-label 属 


性 用 于 给 它 添加 可 访问 名 称 。SVG 中 的 纯 文本 内 容 (GO) 为 旧版 本 浏 
览 器 提供 了 一 种 降级 方案 。 





相关 的 CSS 样式 : 


svg.defs-only { 
display: block; 


position: absolute; 


height: 0; width: 
overflow: hidden; 


svg.nav-icon { 
display: block; 
width: 3em; 
height: 3em; 
Margin: auto; 


0; 


fill: url(#silver-shine); (2) 


a:not(:link) > .nav-icon { 
fill: url(#gold-shine); © 


nav a:link:focus, nav a:link:hover { 
stroke: url(#gold-shine); 
stroke-width: 10px; @ 


} 


input, button { 


display: inline-block; 


height: 2em; 
padding: 0 0.5em; 


input[type="search"] 


width: calc(100% - 


} 
button { 


{ 


5em); 
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display: inline-block; 
width: 3em; 
vertical-align: top; 
color: inherit; 


} 
button svg { 

height: 100%; 

width: 100%; 

fill: currentColor; O 
} 


@ defs-only 类 补充 了 一 些 标记 的 属性 ， 来 确保 仅 用 于 定义 的 <svg> 元 素 无 
论 如 何 都 不 会 影响 布局 或 视觉 效果 。 


O 用 于 导航 图 标的 <svg> 元 素 拥 有 固定 的 宽 和 高 。fiLL 引用 了 SVG 中 预 
先 设置 的 一 个 渐变 ， 它 将 会 被 <use> 元 素 以 及 复 用 的 symbol 继承 。 

© :Link 伪 类 用 于 区 分 <a> 元 素 是 否 有 合法 超 链接 。 如 果 类 没有 匹配 ，SVG 
内 会 重新 使 用 更 明亮 一 些 的 金色 渐变 来 突出 这 是 一 个 活跃 状态 的 页 面 。 

O 对 于 其 他 图 标 ， 当 链接 在 鼠标 光标 悬 停 或 锋 得 焦点 时 将 会 添加 一 个 金色 
的 摘 边 来 表示 交互 的 效果 。 为 了 证 实 这 种 效果 ， 样 式 直 接 设置 在 了 <a> 
元 素 上 。 它 们 同样 会 被 SVG 及 其 内 容 继承 ， 因 为 所 有 SVG 元 素 都 没有 
设置 其 他 的 描 边 样式 。10px 的 描 边 宽度 将 会 应 用 到 最 终 添 加 描 边 的 图 形 
的 坐标 系 中 ， 这 种 情况 下 ， 坐 标 系 是 定义 在 每 个 symbol 内 的 。 

O 因为 样式 在 使 用 时 都 会 被 继承 ， 所 以 当 图 形 应 用 在 同一 个 页 面 的 不 同 背 
景 中 时 是 可 以 改变 的 。 用 在 表单 按钮 内 的 搜索 图 标 将 会 使 用 从 <button> 
上 继承 来 的 文本 的 颜色 来 设置 样式 。 

因为 SVG 标记 的 定义 和 样式 在 网 站 上 的 每 页 内 都 相同 ， 所 以 我 们 通常 在 编 

译 时 会 进行 一 些 服务 端 的 处 理 。 如 果 SVG 代码 比较 多 ， 或 大 多 数 用 户 在 网 

站 上 访问 多 个 网 页 ， 我 们 可 以 在 客户 端 使 用 Ajax 脚本 ， 使 SVG 文件 可 以 

被 缓存 到 浏览 器 中 。 


许多 流行 的 SVG 图 标 系 统 仅 在 <use> 元 素 引 用 外 部 文件 不 被 
支持 时 ， 使 用 Ajax 来 引入 SVGsymbol。WebKit 和 Blink ÙI) 
览 器 目前 支持 外 部 symbol 的 引入 ， 但 是 不 支持 渐变 以 及 其 他 
泻 染 服务 的 引入 。 如 果 有 必要 ， 一 定 要 确保 你 的 脚本 中 有 导 
入 渐变 和 图 案 的 具体 规则 。 



















































































主要 图 形 的 定义 都 包含 在 一 个 单独 的 标记 块 内 ， 这 样 很 容易 给 每 个 图 标 生 
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成 新 的 实例 ， 或 给 这 些 实例 使 用 不 同 的 渐变 。 


例 8-5 使 用 与 例 8-4 相同 的 渐变 ， 以 及 其 中 一 个 完全 相同 的 图 标 ， 依 据 
HTML 代码 中 的 数据 属性 来 动态 生成 星 级 图 。 渐 变 和 symbol 的 定义 是 静态 











brid, (HAE <use> 实例 是 基于 数据 生成 的 。 




















丸 为 现在 每 个 SVG 内 都 包含 了 每 个 图 标的 多 个 副本 ， 所 以 <svg> 上 的 


viewBox 以 及 <use> 元 素 上 的 位 置 属性 都 是 正确 缩放 内 容 所 必需 的 。 此 外 ， 
ARIA 属性 用 于 把 评级 信息 传递 给 辅助 技术 ， 用 只 读 的 范围 滑 块 作为 标记 。 
每 个 等 级 (图 形 中 高 亮 星星 的 个 数 ) 的 视觉 效果 直接 由 aria-valuenow 属性 


























决定 ， 使 用 的 是 基于 nth-of-type 选择 器 的 CSS 规则 。 
的 网 页 。 





图 8-7 显示 的 是 最 终 




















图 8-7: 动态 生成 基于 渐变 效果 的 SVG 星 级 图 标 


例 8-5 使 用 动态 插入 SVG 图 标的 渐变 
HTML 标记 : 





<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
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<title>Reusing Symbols with Gradients</title> 
<style type='text/css'> 
/* styles must be in the same document */ 


</style> 
</head> 
<body> 
<svg Class="defs-only" aria-hidden="true" focusable="false" 
width="0" height="0"> (1) 


<linearGradient id="silver-shine" spreadMethod="repeat" 
gradientTransform="rotate(40) scale(0.8)" > 
<stop offset="0" stop-color="gray" /> 
<stop offset="0.35" stop-color="silver" /> 
<stop offset="1" stop-color="gray" /> 
</linearGradient> 
<LinearGradient id="gold-shine" xlink:href="#silver -shine"> 
<stop offset="0" stop-color="gold" /> 
<stop offset="0.35" stop-color="LightYellow" /> 
<stop offset="1" stop-color="gold" /> 
</linearGradient> 
<symbol id="star" viewBox="0 0 200 200"> 
<path d="M100,10 L150,140 20,50 180,50 50,140 Z" /> 


</symbol> 
</svg> 
<hi>Image Format Awesomeness: </h1i> 
<ol> 
<li id="svg" data-rating="5"> (2) 
<abbr title="Scalable Vector Graphics">SVG</abbr> 
</li> 


<li id="png" data-rating="4"> 
<abbr title="Portable Network Graphics">PNG</abbr> 
</li> 
<li id="gif" data-rating="3"> 
<abbr title="Graphics Interchange Format">GIF</abbr> 
</li> 
<li id="bmp" data-rating="1"> 
<abbr title="Bitmap (Windows )">BMP</abbr> 
</li> 
</ol> 
<script> 
/* script could be loaded as a separate file */ 
</script> 
</body> 
</html> 


O 渐变 的 定义 与 例 8-4 中 相同 ， 但 这 里 我 们 只 需要 一 个 <symbol>。 


O 网 页 主体 的 标记 中 没有 初始 化 任何 SVG 的 内 容 ， 而 列表 的 每 一 项 通过 
data-rating 属性 来 区 分 。 
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CSS 样式 : 


html { 
background-color: #222; 
color: lLightSkyBlue; 

} 

svg.defs-only { 
display: block; 
position: absolute; 
height: 0; width: 0; 


overflow: hidden; (1) 
} 
ol{ 
padding: 0; 
} 
if 
display: block; 
text-align: center; 
list-style: none; 
font-size: larger; 
} 


svg.star-rating { 
display: block; 
Margin: auto; 
width: 10em; 
max-width: 100%; 
height: auto; 


max-height: 2em; (2) 
} 
¿star { 

fill: url(#silver-shine); © 
} 


[aria-valuenow="1"] .star:nth-of-type(-n+1), 
[aria-valuenow="2"] .star:nth-of-type(-n+2), 
[aria-valuenow="3"] .star:nth-of-type(-n+3), 
[aria-valuenow="4"] .star:nth-of-type(-n+4), 
[aria-valuenow="5"] .star:nth-of-type(-n+5) 


{ 
} 


[data-rating]:not(.initialized)::after { 
display: block; 
color: darkgoldenrod; 
text-shadow: black 1px 1px 1px, 
gold 0 0 3px; 
content: attr(data-rating); O 


fill: url(#gold-shine); (4) 
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O 与 例 8-4 中 相同 的 svg.defs-only 样式 用 于 隐藏 包含 所 有 图 形 定义 的 元 素 。 

O 给 要 包含 星 级 的 SVG 元 素 设 定 固定 的 宽 ， 如 果 有 必要 的 话 还 可 能 被 缩 
放 ; max-height 确保 在 不 支持 基于 SVGviewBox 自动 缩放 的 浏览 器 中 也 
有 一 个 合适 的 高 度 。 

© 星星 图 标 默认 使 用 silver-shine 渐变 。 

O 星星 的 正确 数量 变 为 金色 ， 用 一 系列 选择 器 与 aria-valuenow 属性 绑 定 。 
例如 ，:nth-of-type(-n+3) 选择 组 内 前 三 个 <use> 图 标 ， 它 们 是 n WIE 
整数 时 根据 索引 匹配 到 的 图 标 元素 。 

O 如 果 脚 本 没有 执行 ， 即 SVG 星星 没有 生成 ，CSS 伪 元 素 将 会 把 data- 
rating 属性 的 值 输出 到 屏幕 上 。 


JavaScript: 




















(function(){ 
var ns = {svg:"http://www.w3.org/2000/svg", 
xLink: "http: //www.w3.org/1999/xLink"}; 
var maxRating = 5; 
var index = 0; 


var ratings = document.querySelectorAll("[data-rating]"); © 
for (var i=0, n=ratings.length; i<n; i++){ 

var r = ratings[i]; 

//add an `id` value if it doesn't exist 

r.id = r.id || "rating-" + (index++); 


//parse the rating 
var value = parseInt(r.getAttribute("data-rating"),10); 


//create and insert an SVG to represent the rating 

var s = document.createELementNS(ns.svg, "svg"); © 
s.setAttribute("viewBox", "© 0 " + maxRating + " 1"); 
.setAttribute("class", "star-rating"); 
.setAttribute("role", "slider"); 
.setAttribute("aria-labelledby", r.id); 
.setAttribute("aria-valuemin", 0); 
.setAttribute("aria-valuemax", maxRating); 
.setAttribute("aria-valuenow", value); 
.setAttribute("aria-readonly", true); 


mwmwmwmwmwm wm 


//create a group and give it a tooltip title 

var g = document.createElementNS(ns.svg, "g"); 
s.insertBefore(g, null); 

var t = document.createElementNS(ns.svg, "title"); 
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t.textContent = value + " out of " + maxRating; © 
g.insertBefore(t, g.firstChild); 


//create and insert the stars into the group 
for (var j=0; j<maxRating; j++) { 
var u = document.createElementNS(ns.svg, "use"); 
u.setAttribute("class", "star"); 
.setAttributeNS(ns.xlink, "href", "#star"); 
.setAttribute("width", "1"); 
.setAttribute("x", j); 
.insertBefore(u, null); (4) 


wocce 


} 


r.insertBefore(s, null); 
r.classList.add("initialized"); (5) 
} 
DO; 


@ 该 脚本 选中 所 有 拥有 data-rating 属性 的 元 素 ， 然 后 循环 它们 。 每 一 个 
都 在 没有 id 时 任意 分 配 一 个 id， 这 在 ARIA 引用 时 有 用 。 


O SVG 元 素 在 创建 时 都 设置 了 viewBox, class, ARIA 等 属性 ， 同 时 还 把 从 
数据 属性 上 分 析出 的 评级 值 以 及 最 大 评级 值 作为 常数 存储 在 脚本 中 。 


O <title 元 素 用 于 把 评级 翻译 为 工具 提示 文本 。 因 为 许多 浏览 器 在 
<title> 直接 作为 <svg> 的 子 元 素 时 不 把 它 显示 为 提示 工具 ， 额 外 的 组 
(<g>) 用 于 包 title 和 星星 图 标 。 


O 星星 图 标本 身 (<use> 元 素 ) 都 是 一 样 的 ， 除 了 沿 着 SVG 的 宽度 把 它们 
分 隔 开 的 x 属性 ， 图 标 都 被 添加 到 <g> 内 。 


O 整个 图 形 都 被 插入 到 拥有 data-rating 属性 的 元 素 的 最 后 。 然 后 该 元 素 
通过 initialized 类 来 避 开 降 级 的 CSS 样式 。 


每 个 SVG 动态 生成 的 内 容 都 一 样 ， 除 了 aria-vaLuenow 和 aria-labelledby 
属性 以 及 <title> 的 内 容 。 写 为 标记 的 话 ， 如 下 所 示 : 


<svg viewBox="0 0 5 1" 

role="slider" aria-labelledby="png" 

aria-valuemin="0" aria-valuemax="5" 

aria-valuenow="4" aria-readonly="true"> 

<g> 

<title>4 out of 5</title> 
<use Class="star" xlink:href="#star" width="1"/> 
<use Class="star" xlink:href="#star" width="1" x="1"/> 
<use Class="star" xlink:href="#star" width="1" x="2"/> 
<use Class="star" xlink:href="#star" width="1" x="3"/> 
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<use class="star" xlink:href="#star" width="1" x="4"/> 


</g> 
</svg> 


这 种 结构 很 适合 于 使 用 标签 模板 来 生成 动态 内 容 的 JavaScript 库 。 但 是 ， 一 
定 要 确定 你 使 用 的 模板 工具 能 够 恰当 地 识别 SVG 元 素 并 且 给 它们 分 配 SVG 
命名 空间 ;， 否则， 可 能 你 最 终生 成 的 动态 DOM 拥有 正确 的 标签 名 和 属性 ， 


但 是 没有 生成 SVG 





图 像 。 





大 
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之 前 介绍 过 ， 线 性 渐变 是 依据 一 条 线 (渐变 矢量 ) 的 坐标 来 定义 的 。 颜 色 
结 点 沿 着 这 条 线 来 设 定位 置 。 每 种 颜色 的 值 在 直线 的 两 侧 都 会 无 限 延伸 。 
通过 调整 渐变 结 点 和 操作 矢量 ， 线 性 渐变 可 以 创建 许多 效果 。 但 SVG 中 的 
渐变 不 只 这 一 种 。 

径 向 渐变 也 是 一 种 渐变 效果 ， 在 这 里 ， 颜 色 改 变 治 着 一 点 向 外 辐射 。 这 些 渐 
变 可 以 创建 发 光 的 灯 的 效果 ， 或 者 可 用 于 表示 球体 和 类 似 圆 形 结构 的 阴影 。 
径 向 渐变 最 简单 的 一 种 形式 是 通过 定义 一 个 圆 ， 然 后 颜色 从 圆心 到 边缘 逐 
渐 改 变 。 这 也 是 SVG 中 <radialGradient> 元 素 的 默认 行为 。 通 常 ， 默 认 行 
为 并 不 是 唯一 的 选择 ， 你 可 以 通过 使 用 SVG 径 疝 渐变 创建 多 种 效果 ， 包 括 
一 些 目前 还 不 能 通过 CSS 渐变 来 实现 的 效果 。 

本 章 介绍 所 有 可 能 实现 的 效果 ， 略 过 了 径 向 新 变 与 线性 新 变 的 相似 部 分 而 
专注 于 它们 之 间 的 区 别 。 最 后 一 节 的 大 型 图 片 ， 向 你 展示 了 如 何 结合 多 种 
不 同 渐变 来 创建 复杂 的 场景 。 


9.1 径 回 渐变 基础 


径 向 渐变 与 线性 浙 变 在 结构 上 类 似 ， 至 少 在 标签 上 很 相似 。 与 <linearGradient> 
一 样 ，<radialGradient> 是 <stop> 元 素 的 容器 ， 每 个 <Stop> 都 有 一 个 介 于 
0 到 1 (0% 到 100%) 之 间 的 offset 属性 。 结 点 的 值 同样 通过 stop-color 
和 stop-opacity 样式 或 表现 属性 来 指定 。 
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它们 的 不 同 之 处 在 于 这 些 结 点 的 偏 移 映 射 到 要 填充 的 二 维 空间 的 方式 。 

向 渐变 ， 偏 移 是 起 始点 到 结束 圆 的 距离 的 一 部 分 。 你 可 以 修改 起 始 
点 ( 称 为 焦点 ) 的 位 置 以 及 结束 圆 的 大 小 和 位 置 。 

默认 情况 下 ， 当 <radialcradient> 没有 任何 位 置 属 性 时 ， 结 束 圆 是 填充 对 

象 边 界 盒 的 最 大 圆 ， 焦 点 就 是 它 的 中 心 。 

peg Retin 6 章 介 绍 结 点 和 偏 移 时 用 到 过 的 基本 的 红 蓝 渐变 ， 结 

点 没有 变 ， 只 不 过 把 它们 放 到 了 <radialcradient> 元 素 里 面 。 

如 果 例 9-1 中 的 径 癌 渐变 和 对 应 的 线性 渐变 在 同一 个 文件 中 ， 

我 们 可 以 使 用 xLink:href 来 复制 结 点 ， 即 使 它们 是 不 同 的 渐 


变 类 型 。 











例 9-1 中 的 渐变 用 于 填充 圆 ， 结 果 如 图 9-1 所 示 。 


























图 9-1; 各 种 结 点 图 案 的 径 向 渐变 
例 9-1 创建 径 向 渐变 来 填充 圆 


<svg xmlns="http://www.w3.org/2000/svg" 
width="4in" height="1in"> 
<title xml:lang="en">Radial Gradients</title> 
<radialGradient id="red-blue"> 
<stop stop-color="red" offset="0"/> 
<stop stop-color="LightSkyBlue" offset="1"/> 
</radialGradient> 
<radialGradient id="red-blue-2"> 
<stop stop-color="red" offset="0"/> 
<stop stop-color="lightSkyBlue" offset="0.3"/> 
<stop stop-color="red" offset="1"/> 
</radialGradient> 
<radialGradient id="red-blue-3"> 
<stop stop-color="red" offset="0.3"/> 
<stop stop-color="lightSkyBlue" offset="0.7"/> 
</radialGradient> 
<radialGradient id="red-blue-4"> 
<stop stop-color="red" offset="0.3"/> 
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<stop stop-color="lightSkyBlue" offset="0.3"/> 

<stop stop-color="lightSkyBlue" offset="0.7"/> 

<stop stop-color="red" offset="0.7"/> 
</radialGradient> 
<circle r="0.5in" cy="50%" cx="12.5%" fill="url(#red-blue)" /> 
<circle r="0.5in" cy="50%" cx="37.5%" fill="url(#red-blue-2)" /> 
<circle r="0.5in" cy="50%" cx="62.5%" fill="url(#red-blue-3)" /> 
<circle r="0.5in" cy="50%" cx="87.5%" fill="url(#red-blue-4)" /> 

</svg> 


颜色 结 点 没有 绘制 为 平行 线 ， 而 是 被 绘制 为 同心 圆 。 当 颜色 过 渡 比 较 锐 利 
时 ， 就 像 最 后 一 个 例子 那样 ， 将 创建 出 于 心 的 效果 。 


a> 
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当 使 用 径 向 渐变 来 填充 圆 时 ， 渐 变 的 结束 圆 (即将 要 填充 对 象 边 界 盒 的 最 
大 圆 ) 就 是 圆 本 身 。 因 此 渐变 可 以 完美 适应 形状 。 当 情况 不 是 这 样 时 ， 额 
外 的 部 分 是 根据 spreadMethod 属性 来 填充 的 ， 默 认 情 况 下 ， 会 使 用 最 后 一 
个 结 点 颜色 来 填补 。 


图 9-2 显示 了 用 例 9-1 中 的 渐变 填充 1 平方 英寸 的 长 方形 。 

















9-2: 使 用 径 向 渐变 填充 正方 形 





径 向 渐变 也 可 以 很 好 地 填充 <ellipse> 元 素 ， 如 图 9-3 所 示 ， 现 在 每 个 结 点 
都 代表 一 个 同心 椭圆 。 




















9-3: 使 用 径 向 渐变 填充 椭圆 





我 们 同样 可 以 看 到 使 用 渐变 填充 椭圆 边界 盒 大 小 的 长 方形 时 的 椭 贺 图案， 
如 图 9-4 所 示 。 
































图 9-4; 使 用 径 向 渐变 填充 长 方形 (FEDH) 


图 9-3 和 图 9-4 的 结果 使 用 都 是 例 9-1 中 定义 的 渐变 ， 在 渐变 元 素 上 没有 属 
性 ， 表 明 应 该 使 用 椭圆 图 案 来 填充 。 相 反 ， 椭 圆 图 案 是 拉 伸 对 象 边界 盒 单 
位 创建 的 坐标 系 的 结果 。 结 点 图 案 依然 是 数学 上 的 “ 圆 "， 结 点 的 每 一 点 到 
中 心 点 的 距离 都 相同 ， 不 过 当 你 度量 它 时 ， 它 已 经 在 拉 伸 后 的 坐标 系 中 了 。 


创建 总 是 沿 着 完美 圆 的 径 向 SVG 渐变 而 忽略 边界 盒 尺 的 唯 
一 方式 ， 是 使 用 gradientUnits="userSpaceOnUse"。 然 后 ， 你 
需要 使 用 其 他 属性 来 改变 渐变 的 大 小 和 位 置 来 匹配 它 填 充 的 






































当 填 充 正 方形 或 长 方形 时 ，100% 的 结 点 偏 移 的 位 置 是 沿 着 刚刚 触 磁 到 每 
一 条 边 的 圆 〈《 有 可 能 被 拉 伸 )。 但 在 图 片 中 ， 纯 色 内 边 距 隐藏 了 这 个 边界 。 
spreadMethod 属性 同样 可 以 用 来 改变 内 边 距 效果 ， 且 另外 的 可 选 值 也 是 
repeat 和 reflect. 


正如 第 8 章 中 提 到 的 那样 ， 编 写本 书 时 ，WebKit 浏览 器 不 
支持 重复 和 镜像 渐变 。 旧 版 本 的 其 他 浏览 器 (2014 年 之 前 的 
Firefox 和 2013 年 之 前 的 Chrome) 将 忽略 spreadMethod 属性 
的 值 而 直接 填补 渐变 。 














当 重 复 或 映射 径 向 渐变 时 ， 你 不 会 以 重复 圆 的 虚线 图 案 结束 。 相 反 ， 颜 色 
图 案 会 沿 着 每 条 射线 〈 从 中 心 点 向 外 辐射 ) 重复 或 镜像 地 扩展 ， 直 到 到 达 
形状 的 边缘 。 当 径 向 渐变 用 于 填充 长 方形 时 ， 它 会 动态 改变 拐角 的 样子 。 
例 9-2 中 使 用 了 不 同 的 选项 ， 效 果 如 图 9-5 所 示 。 
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图 9-5: 使 用 不 同 扩展 方式 的 径 向 渐变 : 填补 (£), BS (P), RR (6) 
例 9-2 使 用 spreadMethod 改变 拐角 效果 


<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.0rg/1999/xlink" 
width="4in" height="1in"> 
<title xml: lang="en">Repeating Radial Gradients</title> 
<radialGradient id="red-blue" spreadMethod="pad"> 
<stop stop-color="red" offset="0"/> 
<stop stop-color="lightSkyBlue" offset="1"/> 
</radialGradient> 
<radialGradient id="repeat" spreadMethod="repeat" 
xlink:href="#red-blue" /> 
<radialGradient id="reflect" spreadMethod="reflect" 
xLink:href="#red-blue" /> 


<rect height="1in" width="32%" x="0" fill="url(#red-blue)" /> 

<rect height="1in" width="32%" x="34%" fill="url(#repeat)" /> 

<rect height="1in" width="32%" x="68%" fill="url(#reflect)" /> 
</svg> 


在 重复 渐变 中 ， 颜 色 治 着 圆 / 椭圆 的 边缘 瞬间 切换 ， 重 新 以 第 一 个 颜色 结 点 


开始 。 在 映射 渐变 中 ， 边 缘 在 颜色 变 回 去 之 前 到 达 顶 峰 。 要 真正 看 到 这 些 
效果 ， 我 们 首先 需要 创建 一 个 渐变 圆 没有 填 满 整 个 边界 盒 的 径 向 渐变 。 


CSS 与 SVG 
CSS 中 的 径 向 渐变 
CSS 同样 也 有 径 向 渐变 ， 使 用 radial-gradient 函数 来 定义 。 与 线性 渐变 一 
样 ， 它 的 语法 和 值 与 SVG 渐变 相似 但 不 同 。 


CSS 径 向 渐变 的 一 个 重要 属性 (目前 SVG 中 不 支持 ) 是 可 以 选择 圆 形 或 
椭圆 形 的 渐变 形状 。radiaL-gradient 函数 的 第 一 个 参数 用 于 描述 最 终 的 形 
状 。 它 包括 关键 词 circle 来 要 求 渐变 必须 沿 着 完美 的 圆 ， 而 忽略 生成 图 片 
的 宽 高 比 ， 还 有 关键 词 ellipse 来 依据 盒子 拉 伸 渐变 。 





非 正 方形 金子 内 的 完美 的 圆 不 会 触及 到 金子 的 所 有 边 。 因 此 形状 参数 还 
包括 尺寸 信息 ， 它 们 可 用 于 圆 和 栅 圆 。 定 义 尺 寸 最 简单 的 方式 是 使 用 以 
下 四 个 尺寸 关键 词 之 一 : closest-side, farthest-side, closest-corner, 
farthest-corner, 

以 过 号 来 结束 形状 和 渐变 的 尺寸 等 信息 ， 紧 接着 是 一 个 喜 号 分 隔 的 颜色 结 
点 列表 。 例 如 ， 如 下 的 背景 样式 规则 生成 图 9-6 所 示 的 渐变 。 


background: radial-gradient(circle closest-side, 
red, LightSkyBlue) ; 

















9-6: BAZ CSS 渐变 


默认 的 形状 是 ellipse， 而 默认 的 尺寸 是 farthest-corner， 所 以 如 下 的 渐 
变 都 是 相等 的 。 


background: radial-gradient(red, lightSkyBlue) ; 
background: radial-gradient(ellipse, 

red 0%, LightSkyBlue); 
background: radial-gradient(farthest-corner, 

red, LightSkyBlue 100%); 
background: radial-gradient(farthest-corner ellipse, 

red 0%, LightSkyBlue 100%); 


使 用 farthest-corner 意味 着 没有 空 的 拐角 要 填补 ， 也 意味 着 最 后 一 个 颜色 
结 点 只 可 以 在 扬 角 可 见 ， 如 图 9-7 所 示 。 

















9-7: 椭圆 CSS 渐变 





个 别 颜 色 结 点 的 位 置 可 以 使 用 有 单位 的 长 度 或 百分比 来 定义 。 当 使 用 百 分 
比 时 ， 它 们 是 圆 / 椭圆 半径 的 百分比 。 当 在 椭圆 渐变 中 使 用 长 度 时 ， 它 们 是 
沿 着 椭圆 水 平 半 径 度 量 的 。 如 果 没 有 定义 偏 黎 ， 颜色 在 可 用 的 空间 内 均匀 
分 布 。 

与 线性 渐变 类 似 ，CSS 还 有 一 个 单独 的 repeating-radial-gradient 有 函数 。 
它 的 参数 与 正常 的 径 向 渐变 相同 ， 渐 变 每 个 周期 的 尺寸 可 以 通过 第 一 个 和 
最 后 一 个 偏 移 的 差 来 计算 。 


当 第 一 个 偏 移 非 零 时 ，Blink 和 WebKit 浏览 器 目前 将 使 用 纯 
色 填 充 圆 的 中 心 。Firefox 和 下 会 向 内 向 外 重复 渐变 ， 依 照 
声明 中 的 通用 指令 ( 对 于 所 有 类 型 的 渐变 ) 来 在 两 个 方向 上 
重复 周期 。 


再 次 说 明 ， 要 想 创建 映射 渐变 ， 你 必须 使 渐变 圆 变 为 两 们 大， 然后 手动 添 
加 两 次 颜色 结 点 。 


93 缩放 圆 


现在 ， 你 知道 了 线性 渐变 的 默认 位 置 和 大 小 可 以 通过 渐变 元 素 上 的 属性 
来 修改 。 对 于 径 癌 渐变 也 同样 如 此 。 就 像 <LinearGradient> 的 位 置 属性 
看 起 来 很 像 <Line> 的 属性 那样 ，<radialGradient> 的 位 置 属 性 看 起 来 和 
<circle> 很 像 。 


<radialGradient> 上 的 cx, cy 以 及 r 属性 定义 了 100% 偏 移 的 圆 的 大 小 和 
位 置 。 它 们 的 默认 值 都 是 50%， 所 以 会 创建 一 个 以 坐标 系 中 心 为 圆心 且 填 
充 其 整 个 宽度 和 长 度 的 圆 。 默 认 情 况 下 ， 焦 点 (0% 偏 移 颜色 的 点 ) 会 根据 
(cx,cy) 点 移动 。 


例 9-3 修改 了 这 些 属性 创建 了 一 个 小 的 圆 形 渐变 ， 且 偏离 user SpaceOnUse 
坐标 系 的 中 心 。 这 在 渐变 圆 的 边缘 和 形状 的 边缘 之 间 留 下 足够 的 空间 ， 
reflect 扩展 方式 可 以 创建 一 个 非常 好 的 波纹 效果 ， 就 像 雨滴 落 在 积 水 上 的 
波浪 ， 如 图 9-8 所 示 。 


例 9-3 探 制 径 向 渐变 的 尺寸 和 位 置 
<svg xmlns="http://www.w3.org/2000/svg" 
width="4in" height="2in"> 
<title xml:lang="en">Repeating Radial Ripples</title> 
<radialGradient id="raindrop" spreadMethod="reflect" 


























gradientUnits="userSpaceOnUse" 
cx="30%" cy="70%" r="15px"> 
<stop stop-color="lightSteelBlue" offset="0.4"/> 
<stop stop-color="darkSlateGray" offset="0.8"/> 
<stop stop-color="darkSlateBlue" offset="1"/> 
</radialGradient> 
<rect height="100%" width="100%" fill="url(#raindrop)" /> 
</svg> 


9-8: 固定 圆 的 大 小 的 映射 径 向 渐变 


基本 圆 的 半径 是 13px， 所 以 每 隔 15px 的 距离 ， 渐 变 循环 一 次 结 点 列表 一 一 
正 序 或 者 倒序 。 图 中 暗色 的 环 以 30px 分 隔 开 ， 该 距离 是 映射 渐变 在 两 个 方 
向 上 各 循环 一 个 周期 所 需 的 距离 。 


相 比 而 言 ， 使 用 spreadMethod="repeat" 可 以 更 清晰 地 看 到 单个 重复 (15px 
间隔 ) ， 如 图 9-9 所 示 。 


©) 


89-9: 固定 圆 的 大 小 的 重复 镜像 渐变 









































AY 


118 | #98 


css 5 SVG 
控制 CSS 径 向 渐变 的 尺寸 和 位 置 


你 可 以 通过 给 radial-gradient 或 repeating-radial-gradient 函数 的 第 一 
个 参数 添加 更 多 信息 WS > 来 榨 制 CSS a EA 形 的 尺寸 和 位 置 


第 一 个 参数 完整 的 语法 如 下 所 示 : 


[ <ending-shape> || <size> ]? [ at <position> ]? 


翻译 为 汉语 的 意思 是 : 形状 和 尺寸 是 可 选 的 ， 且 顺序 也 没有 严格 规定 ， 之 
后 可 选 的 是 关键 词 at 以 及 位 置 。 


形状 是 关键 词 circle fÆ ellipse 其 中 之 一 。 尺 寸 可 以 是 一 个 cLosest/ 
farthest-side/corner 关键 词 或 确切 的 半径 长 度 。 圆 形 有 一 个 半径 长 度 ， 而 
MAAN: 第 一 个 是 水 平 半径 ， 然 后 是 垂直 半径 。 在 给 尺寸 设置 长 度 时 ， 
形状 关键 词 不 是 必需 的 ， 因 为 它 是 由 长 度 值 来 决定 的 。 


对 于 椭圆 渐变 ， 两 个 半径 值 还 可 以 分 别 被 指定 为 图 片 宽 和 高 的 百分比 。 目 

前 你 无 法 使 用 百分比 来 指定 圆 形 CSS 渐变 的 尺寸 。 未 来 的 CSS 渐变 可 能 会 
采用 SVG 相对 于 对 角 线 长 度 来 计算 圆 形 半径 百分比 的 方法 ， 现 在 这 可 以 用 
& CSS 形状 模块 的 圆 中 。 


CSS 径 向 渐 变 的 位 置 相 当 于 SVG 中 的 cx 和 cy 属性 。 它 可 能 是 长 度 值 或 百 
分 比 ， 也 可 能 是 指定 CSS 背景 位 置 的 关键 词 的 组 合 。 关 键 词 at 必须 要 有 ， 
用 于 区 分 位 置信 息 和 尺寸 信息 。 上 默认 的 位 置 是 at center, 或 at 50% 50%, 


当 把 渐变 定位 在 边 上 或 所 角 ( 例 如 ， 在 右上 角 ) 时 ， 到 
closest-side 或 closest-corner WIEBE, RAH 
形 渐 交 折 营 为 一 个 点 ， 椭 圆 渐 交 折 营 为 线性 渐 交 。 


基于 以 上 信息 (注意 CSS 没有 映射 渐变 ， 只 有 简单 的 重复 渐变 ) ， 例 9-3 中 
积 水 上 的 波纹 渐变 可 以 使 用 如 下 代码 创建 : 


background: repeating-radial-gradient( 
30px at 30% 70%, 
lightSteelBlue 0%, lightSteelBlue 20%, 
darkSlateGray 40%, darkSlateBlue 50%, 
darkSlateGray 60%, 
lightSteelBlue 80%, lLightSteelBlue 100%); 





圆 的 半径 


变 为 两 倍 (从 15px 变 到 30px) 以 留 下 映射 渐变 的 空间 。 类 似 地 ， 


偏 移 百分比 减 半 (SVG 渐变 中 的 100% 变 为 CSS 渐变 圆 形 的 3$0%)， 复 制 
一 份 结 点 来 填充 圆 的 剩余 部 分 。 不 同 于 重复 线性 渐变 ， 你 不 必 担 心 百分比 
偏 移 打 乱 渐变 的 比例 ， 它 们 一 直 都 是 你 指定 的 形状 半径 的 百分比 。 


9.4 
对 于 径 向 





调整 焦点 


渐变 还 有 另外 两 个 位 置 属性 : fx 和 fy。 他 们 是 渐变 焦点 的 坐标 。 





如 果 说 渐变 圆 是 描述 100% 偏 移 处 结 点 的 位 置 ， 那 么 焦点 描述 的 就 是 0% 处 


结 点 的 位 置 。 





我 们 之 前 看 到 的 渐变 使 用 的 都 是 默认 的 焦点 ， 通 常 是 圆心 。fx 的 默认 值 是 


cx 的 值 ， 
焦点 不 在 











fy 的 默认 值 是 cy 的 值 。 任 何其 他 值 都 会 创建 一 个 不 对 称 的 渐变 。 
圆心 意味 着 什么 呢 ? 它 意味 着 渐变 圆 的 长 度 在 每 个 方向 上 都 是 不 











同 的 。 从 该 点 出 发 的 每 条 射线 在 到 达 圆 的 边缘 时 会 通过 所 有 的 结 点 颜色 。 


焦点 不 在 


在 另 一 个 方向 上 被 放大 。 这 可 能 是 你 能 看 到 的 最 简单 的 效果 。 








焦点 应 该 在 渐变 圆 内 ， 如 果 不 这 样 ， 根 据 SVG 1.1， 它 将 被 
移动 到 与 它 最 近 的 圆 的 边缘 上 。SVG 2 基于 目前 在 HIML 
canvas 渐变 阔 数 中 使 用 的 方式 提出 了 不 同 的 方案 。 换 句 话 
说 ， 如 果 焦 点 在 圆 的 外 部 ， 就 不 要 指望 跨 浏览 器 有 一 致 的 效 


RT. 









































圆心 看 起 来 是 什么 样子 呢 ? 效果 新 变 是 在 一 个 方向 上 被 压缩 了 而 























例 9-4 构建 了 一 个 显示 渐变 的 网 格 ， 使 用 fx 属性 在 中 心 点 左右 移动 焦点 ， 
还 可 以 使 用 cy 属性 上 下 移动 渐变 圆 的 中 心 点 。 组 合 结果 如 图 9-10 所 示 。 
该 例 中 设置 spreadMethod 的 值 为 reflect 来 显示 各 个 方向 上 重复 距离 是 如 
何 与 焦点 和 圆 的 边 之 间 的 原 距离 相 匹配 的 。 这 看 起 来 真 的 很 酷 ! 








AR 
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图 9-10: 比较 径 向 渐变 中 心 点 改变 ( 行 ) 和 焦点 位 置 改变 ( 列 ) 的 效果 
例 9-4 控制 径 向 渐变 的 尺寸 和 位 置 


<svg xmLns="http://www.w3.org/2000/svg" 
xmlns:xlink="http: //www.w3.0rg/1999/xlink" 
width="4in" height="3in"> 
<title xml:lang="en">Focus Point Versus Center Point</title> 
<defs> 


<radialGradient id="center" spreadMethod="reflect" 
r="30%"> o 
<stop stop-color="darkRed" offset="0"/> 
<stop stop-color="lightYellow" offset="1"/> 


</radialGradient> 

<radialGradient id="left" xlink:href="#center" 
fx="25%"/> (2) 

<radialGradient id="right" xlink:href="#center" 
fx="75%"/> 

<radialGradient id="left-up" xlink:href="#left" 
cy="25%" /> © 

<radialGradient id="left-down" xlink:href="#left" 
cy="75%" [> 

<radialGradient id="center-up" xlink:href="#center" 
cy="25%" /> 
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<radialGradient id="center-down" xlink:href="#center" 


cy="75%" [> 

<radialGradient id="right-up" xlink:href="#right" 
cy="25%" /> 

<radialGradient id="right-down" xlink:href="#right" 
cy="75%" [> 

<rect id="r" width="30%" height="30%" /> (4) 


</defs> 

<use Xlink:href="#r" x="0%" y="0%" fill="url(#left-up)"/> 

<use Xlink:href="#r" x="35%" y="0%" fill="url(#center-up)"/> 

<use Xlink:href="#r" x="70%" y="0%" fill="url(#right-up)"/> 

<use Xlink:href="#r" x="0%" y="35%" fill="url(#left)"/> 

<use Xlink:href="#r" x="35%" y="35%" fill="url(#center)"/> 

<use xlink:href="#r" x="70%" y="35%" fill="url(#right)"/> 

<use xlink:href="#r" x="0%" y="70%" fill="url(#left-down)"/> 

<use xlink:href="#r" x="35%" y="70%" fill="url(#center-down)"/> 

<use Xlink:href="#r" x="70%" y="70%" fill="url(#right-down)"/> 
</svg> 


@ 将 被 用 于 中 间 部 分 的 新 变 使 用 默认 居中 的 圆 形 和 焦点 。 半 径 设置 为 对 象 
边界 盒 的 30%， 给 重复 效果 留 下 空间 。 

@ 中 间 一 行 的 其 他 渐变 通过 调整 fx 在 中 心 的 左 侧 或 右 侧 来 创建 ， 通 过 使 用 
xlink:href 属性 来 复制 第 一 个 渐变 的 颜色 结 点 和 半径 。 

© 剩 下 的 渐变 从 前 面 的 某 个 渐变 中 复制 颜色 结 点 、 半 径 以 及 焦点 ， 之 后 调 
整 cy 的 值 。 

O 因为 我 们 要 有 9 个 同样 宽 高 的 长 方形 ， 所 以 预先 定义 一 个 形状 ， 然 后 使 
用 <use> 元 素来 复制 。 

如 你 所 见 ， 改 变 渐变 圆 形 的 中 心 点 会 变换 整个 渐变 图 案 的 位 置 。 相 比 而 言 ， 

改变 焦点 会 明显 改变 渐变 的 整体 图 案 ， 尤 其 是 在 重复 渐变 中 。 

如 果 你 只 改变 中 心 点 而 没有 改变 焦点 ， 当 然 会 大 大 改变 渐变 


的 外 观 。 例 9-4 中 ,没有 设置 渐变 的 垂直 位 置 fy， 所 以 它 可 
以 自动 调整 来 匹配 cy 的 变化 。 
































从 一 个 点 扩展 聚焦 区 域 
SVG 2 中 给 径 向 渐变 增加 了 一 个 新 的 fr 属性。 它 将 会 围绕 焦点 定义 一 个 
， 表 示 渐 变 0% 偏 移 的 位 置 。 相 似 的 参数 已 经 可 以 在 HTML canvas 绘 





大 
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当 焦点 在 主要 的 国 的 中 心 时 ， 渐 变 的 结果 与 第 一 个 结 点 偏 移 不 为 零 时 一 样 ， 
除非 有 额外 的 间隔 没有 包含 在 循环 周期 内 。 对 于 不 对 称 渐变 ， 它 的 几何 形 
状 将 与 任何 现在 可 以 通过 SVG 生成 的 形状 都 不 同 。 


9.5 变换 径 向 渐变 


gradientTransform 属性 也 可 以 用 在 <radialGradient> 上 ， 且 功能 与 用 在 线 
性 渐变 上 完全 相同 ， 它 会 改变 渐变 底层 坐标 系 ， 平 移 、 旋 转 、 缩 放 或 倾斜 
不 仅仅 作用 在 中 心 点 而 且 是 作用 在 整个 渐变 上 。 

再 次 说 明 ， 你 必须 要 注意 拉 伸 对 象 边界 盒 坐标 系 的 效果 。 无 论 如 何 旋转 
objectBoundingBox 径 向 渐变 ， 它 总 会 被 沿 着 形状 的 长 轴 拉 伸 。 

但 是 你 可 以 通过 使 用 skew 变换 来 创建 一 个 沿 不 同 轴 拉 伸 的 椭圆 。 例 9-5 在 
焦点 不 同 的 三 个 渐变 上 使 用 相同 的 skew 变换 ， 结 果 如 图 9-11 所 示 。 


=, 


Nd A 


9-11: 倾斜 焦点 不 同 的 径 向 渐变 


例 9-5 倾斜 径 向 渐变 
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xLink="http: //www.w3.org/1999/xLink" 
width="4in" height="1in"> 
<title xml: lLang="en">Skewed Radial Gradients</title> 
<defs> 




















<radialGradient id="center" spreadMethod="repeat" r="40%" 
gradientTransform="translate(-0.3,0) skewX(30)"> © 
<stop stop-color="indigo" offset="0"/> 
<stop stop-color="LightPink" offset="0.5"/> 
<stop stop-color="lightSkyBlue" offset="0.7"/> 
<stop stop-color="indigo" offset="1"/> (2) 
</radialGradient> 
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<radialGradient id="left" xlink:href="#center" 
Fx="25%" [> 

<radialGradient id="right" xlink:href="#center" 
Fx="75%" [> © 


<rect id="r" width="30%" height="100%" /> 
</defs> 


<use xlink:href="#r" x="0%" y="0%" fill="url(#left)"/> 

<use xlink:href="#r" x="35%" y="0%" fill="url(#center)"/> 

<use Xlink:href="#r" x="70%" y="0%" fill="url(#right)"/> 
</svg> 


@ skewx(30) 变换 将 会 把 渐变 上 的 点 向 右 移动 y 轴 增 加 的 距离 。 

O 渐变 使 用 的 是 repeat 扩展 方式 ， 所 以 结 点 的 顺序 将 不 会 改变 。 第 一 个 和 
最 后 一 个 结 点 颜色 相同 ， 这 就 避免 了 锐利 的 过 渡 。 

© 与 例 9-4 相同 ， 其 他 的 渐变 是 通过 左右 移动 焦点 创建 的 。 


例 9-5 中 使 用 的 gradientTransform 中 还 包括 一 个 水 平 的 变换 来 重新 设 定 渐 
变 的 中 心 位 置 ， 它 也 会 受到 skew 的 影响 。 


<radialGradient> 上 的 变换 是 相对 于 坐标 系 的 原点 (左上 角 ) 
而 不 是 渐变 的 中 心 来 计算 的 。 


倾斜 和 偏离 中 心 的 焦点 使 得 径 向 渐变 不 局 限于 完美 的 几何 对 称 ， 还 增加 了 
三 维 的 感觉 。 因 此 ， 这 也 是 渐变 可 以 用 在 写实 绘制 中 的 一 种 方式 。 


96 ”大 型 渐变 


要 想 细致 入 微 地 表现 真实 对 象 ， 你 需要 考虑 光线 和 阴影 的 颜色 变化 。SVG 
包含 了 滤 镜 函数 ， 用 它 来 模拟 光照 效果 ,但 是 这 会 增加 额外 的 处 理 时 间 。 
如 果 你 可 以 使 用 渐变 来 达到 同样 的 效果 ， 往 往 会 更 加 高 效 ， 尤 其 是 在 你 之 
后 想 要 给 图 片 添 加 动画 的 时 候 。 


9-12 比较 了 这 两 种 效果 。 一 个 形状 使 用 不 对 称 的 径 向 渐变 来 模拟 黄色 
光照 射 在 一 个 红色 球 上 的 效果 ， 另 一 个 使 用 光照 滤 镜 来 实现 相似 的 效果 。 
渐变 不 能 创建 像 滤 镜 那 样 的 三 维 曲 线 ， 但 非常 接近 。 完 整 的 代码 如 例 9-6 
所 示 。 





























B 9-12: 聚光灯 照 在 球 上 ， 通 过 近似 的 渐变 生成 (E) 或 光照 滤 镜 计算 生成 (4) 
例 9-6 使 用 渐变 或 滤 锐 创建 灯光 效 采 


<svg xmlns="http://www.w3.org/2000/svg" 
width="4in" height="2in" > 
<title xml: lang="en">Simulated Lighting Versus 
Lighting Filters</title> 


<radialGradient id="faux-lighting" 
cx="45%" cy="45%" r="60%" 


fx="30%" fy="30%" > o 
<stop offset="0.1" stop-color="lightYellow" /> 
<stop offset="0.9" stop-color="darkRed" /> (2) 
</radialGradient> 


<circle cx="25%" cy="50%" r="0.9in" 
fill="url(#faux-lighting)"/> 
<filter id="yellow-glow" primitiveUnits="objectBoundingBox"> 
<feGaussianBlur in="SourceAlpha" stdDeviation="0.3" /> 
<feComposite in2="SourceAlpha" operator="in" /> (4) 
<feSpecularLighting surfaceScale="0.1" 
specularConstant="1" 
specularExponent="20" 
lighting-color="lightYellow" 
result="highlight"> 
<fePointLight x="0.35" y="0.35" z="0.7"/> (5) 
</feSpecularLighting> 
<feComposite in="SourceGraphic" in2="highlight" 
operator="arithmetic" 
k1="0" k2="1" k3="0.9" k4="0" /> 
<feComposite in2="SourceAlpha" operator="in" /> (6) 
</filter> 
<circle cx="75%" cy=" 50%" r="0.9in" 
fill="darkRed" filter="url(#yellow-glow)" /> (7) 
</svg> 


@ <radialcradient> 定义 了 一 个 比 边 界 盒 稍 大 的 圆 ， 并 向 左上 方 偏离 中 心 。 


焦点 在 左上 方 移动 距离 更 多 的 地 方 。 因 此 形状 的 这 一 边 会 受到 初始 颜色 
结 点 更 大 的 影响 ， 而 右 下 方 将 被 最 后 的 颜色 结 点 控制 。 
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的 小 圆 ， 并 在 渐变 圆 的 边 上 露出 最 后 的 红色 。 
© 在 第 一 个 贺 上 简单 地 应 用 渐变 填充 的 效果 。 

O 滤 镜 首先 生成 形状 alpha 通道 的 一 个 模糊 版 本 ， 然 后 把 它 沿 着 原形 状 的 
边缘 裁剪 。 这 时 就 创建 了 一 个 距 形状 边缘 越 近 ，alpha 的 值 越 小 的 层 。 
O 光照 滤 镜 使 用 上 一 步 的 alpha 通道 作为 隆起 映射 来 定义 对 象 的 三 维 形 
状 。 然 后 计算 添加 到 形状 上 的 光 的 量 ,， 使 用 各 种 各 样 的 属性 来 定义 形 
状 的 反射 效果 ， 使 用 <fePointLight> 元 素来 定义 入 射 光 的 位 置 和 图 案 。 

lighting-color 属性 指定 了 浅黄 色 的 光 。 
O 最 后 一 步 把 光照 效果 和 底层 彩色 图 形 结合 在 一 起 ， 并 再 次 裁剪 它 ， 所 以 
光 只 在 形状 最 初 不 透明 的 部 分 可 见 。 
O 第 二 个 圆 使 用 纯 darkRed 色 填 充 ， 然 后 通过 filter 属性 应 用 光照 效果 。 
目前 使 用 渐变 代替 光照 滤 镜 最 充分 一 个 理由 就 是 跨 浏 览 器 的 一 致 性 。 即 使 
所 有 浏览 器 都 实现 了 光照 滤 镜 ， 但 是 浏览 器 之 间 的 实现 并 不 一 致 。 
WebKit 目前 没有 实现 光照 效果 的 滤 镜 ， 该 滤 镜 元 素 会 返回 一 
个 透明 层 ; 结合 例 9-6 中 的 例子 来 说 ， 结 果 显 示 的 是 原始 的 
平坦 的 红色 圆圈 ， 与 其 他 滤 镜 结合 ， 图 形 可 能 会 完全 消失 。 





















































其 至 在 支持 滤 镜 光照 效果 的 浏览 器 中 ， 真 切 的 执行 效果 也 有 很 大 的 不 同 。 
图 9-12 中 显示 的 是 在 Firefox 中 的 效果 ， 图 9-13 是 相同 的 代码 在 Chrome 中 
的 演 染 效果 ， 光 照 更 加 强烈 ，IE 会 生成 介 于 两 者 之 间 的 一 个 图 片 。 




















图 9-13; 聚光灯 照 在 球 上 在 另 一 种 浏览 器 中 的 效果 ， 左 侧 是 通过 渐变 生成 ， 右 侧 是 
通过 滤 镜 生成 
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照 滤 镜 需要 通过 多 次 计算 而 渐变 通过 单个 函数 来 生成 。 第 二 ， 滤 镜 在 泻 染 
后 、 光 栅 化 后 的 图 片上 进行 计算 ， 所 以 每 次 底层 形状 改变 或 移动 时 ， 它 都 
需 重新 计算 。 








CSS 与 SVG 
使 用 CSS 径 向 渐变 模仿 焦点 
目前 在 CSS 中 还 没有 办 法 调整 渐变 焦点 。 某 些 情况 下 ， 对 于 非 重 复 渐变 ， 
你 可 以 使 用 分 层 的 背景 图 片 来 模拟 焦点 不 对 称 的 效果 。 焦 点 颜色 使 用 从 有 色 
到 透明 的 一 个 或 多 个 渐变 来 绘制 ， 然 后 把 它 放 在 代表 最 终 形状 的 渐变 之 上 。 
基于 这 种 方法 ， 例 9-7 使 用 CSS 渐变 重新 创建 了 聚光灯 照 在 红色 球 上 的 效 
果 。 图 9-14 展示 了 与 原 SVG 渐变 版 本 对 比 的 结果 。 

















9-14: 使 用 一 个 单独 的 SVG 渐变 (£) 和 分 层 的 CSS 渐变 (6) 来 生成 焦点 渐 
变 效 果 


例 9-7 使 用 分 层 的 CSS 渐变 模拟 偏离 中 心 的 放射 光 
<!DOCTYPE htmL> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>CSS and SVG Simulated Lighting Gradients</title> 
<style type='text/css'> 
html, body { 
height: 2in; 
width: 4in; 
margin: 0; padding: 0; 
text-align: center; (1) 
} 


svg, div.sphere { 
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height: 1.8in; 
width: 1.8in; 
display: block; 
float: left; 
margin: 0.1in; 


div.sphere { 
border-radius: 50%; 
background: 
radial-gradient(ellipse 40% 40% at 32% 32%, 
LlightYellow 15%, 
rgba(100%, 100%, 88%, 0.5) 40%, 
transparent), 
radial-gradient(ellipse 55% 55% at 40% 40%, 
rgba(100%, 100%, 88%, 0.4) 20%, 
transparent), 
radial-gradient(ellipse 60% 60% at 45% 45%, 
rgb(100%,55%,45%), darkRed 90%); (2) 
} 
</style> 
</head> 
<body> 
<svg> 
<radialGradient id="faux-lighting" 
CEXE 45%" cy="45%" r="60%" 
fx="30%" fy="30%" > 
<stop offset="0.1" stop-color="lightYellow" /> 
<stop offset="0.9" stop-color="darkRed" /> 
</radialGradient> 
<circle cx="50%" cy="50%" r="50%" 
fill="url(#faux-lighting)"/> © 


</svg> 

<div class="sphere"></div> (4) 
</body> 
</html> 


O 前 两 个 CSS 规则 对 网 页 整体 进行 布局 ， 使 它 与 例 9-6 中 的 SVG 布局 相 
匹配 ， 包 括 GH AEE) 整个 网 页 的 尺寸 。 


O 渐变 效果 作为 分 层 的 背景 图 像 来 使 用 ， 结 合 三 个 单独 的 radial-gradient 
国 数 来 创建 把 焦点 移动 到 圆 边缘 的 效果 。 中 间 的 新 变 的 结 点 使 用 rgba 函 
数 创建 了 部 分 透明 的 LtghtYeLLow 色 。 


© 作为 对 比 的 SVG 渐变 使 用 内 联 的 SVG 代码 创建 。 
O 单独 使 用 一 个 <div> 标签 来 显示 CSS 渐变 生成 的 背景 内 容 。 
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为 了 在 所 有 浏览 器 中 都 有 最 佳 效 果 ， 例 9-7 中 使 用 的 
transparent 关键 词 应 该 通过 表示 亮 一 些 的 浅黄 色 的 rgba 函 
数 来 代替 。 一 些 旧 版 本 的 Firefox 在 向 transparent 关键 词 过 
渡 时 ， 会 将 颜色 转向 黑色 ( 官方 的 透明 黑色 )。 该 规范 现在 
提供 了 明确 的 引导 方案 来 避免 这 种 问题 。 


目前 已 经 提议 给 CSS 渐变 添加 焦点 参数 (包括 焦点 半径 ) 来 更 简单 地 创建 
这 种 效果 ， 但 具体 语法 还 没有 最 终 确定 。 


SVG 渐变 是 一 个 看 似 简 单 的 话题 。 它 只 有 两 种 类 型 的 渐变 ， 线 性 和 径 向 ， 
但 是 它 有 无 数 可 能 的 变化 来 创建 不 同 的 效果 。 通 过 这 些 变 化 ， 渐 变 可 以 给 
简单 的 矢量 形状 添加 细微 差别 和 小 细节 。 


渐变 是 SVG 开发 者 工具 包 的 一 个 主要 部 分 ， 并 且 可 被 用 于 创建 非常 复杂 和 
精密 的 图 像 。 在 大 多 数 情况 下 ， 这 些 图 片 不 是 通过 单个 精确 的 几何 渐变 组 
成 ， 而 是 由 多 个 部 分 透明 渐变 的 元 素 重合 而 成 。 

我 们 可 以 想象 一 个 戏剧 舞台 之 类 的 东西 来 做 个 练习 ， 完 整 的 场景 包括 侧 矣 
红色 的 天 殷 线 、 顶 部 的 幕布 以 及 配 有 聚光灯 的 舞台 。 作 为 图 片 ， 这 可 以 方 
便 地 突出 给 定 的 对 象 (图 像 、 幻 灯 片 、 视 频 以 及 文本 块 )， 并 且 由 于 它 是 
SVG， 我 们 可 以 直接 对 幕布 进行 打开 关闭 操作 。 

当 幕 布 打开 或 收 起 时 ， 它 会 操作 可 见 光 来 显示 明亮 和 阴影 区 域 ， 这 可 以 通过 
一 个 有 阴影 的 红色 渐变 来 很 好 地 实现 。 我 们 中 的 Amelia 之 前 使 用 简单 重复 
渐变 填充 的 长 方形 创建 了 一 个 类 似 的 场景 。 图 9-15 显示 的 场景 是 由 Kurt 创 
建 的 ， 他 通过 谨慎 地 控制 渐变 结 点 ， 使 它 的 位 置 匹配 路 径 曲 线 来 遮挡 幕布 。 
该 图 片 由 三 个 不 同 的 层 构成 。 

后 面 覆 盖 整 个 宽度 的 是 舞台 ， 它 是 一 个 简单 的 长 方形 ， 且 新 变 从 距离 顶部 
350 个 单位 的 位 置 开 始 ， 它 上 面 有 多 个 新 变 登 加 来 创建 聚光灯 照射 在 木 地 板 
上 的 效果 。 舞 台 的 边 其 实 是 舞台 中 一 个 渐变 的 一 部 分 ， 它 还 告诉 你 如 何 使 
用 这 种 渐变 来 “ 画 ” 难 一 点 儿 的 边界 。 反 过 来 说 ， 光 照 大 部 分 都 是 透明 的 ， 
距离 中 心 越 近 ， 不 透明 度 越 高 ， 焦 点 偏 移 是 为 了 创建 聚光灯 从 一 个 角度 昭 
射 在 舞台 上 的 效果 。 这 是 一 个 柔和 的 聚光灯 ， 我 们 没有 明显 地 把 它 的 边 刻 
画 出 来 ， 而 是 隐藏 在 周围 的 黑暗 中 。 

下 一 层 由 左 侧 和 右 侧 的 幕布 组 成 ， 它 们 使 用 了 相同 核心 路 径 创建 的 形状 和 
一 个 非常 复杂 的 使 用 裙 皱 来 表示 光照 和 阴影 的 红色 / 红 褐色 图 案 。 右 侧 的 幕 































































































布 与 左 侧 的 完全 一 样 ， 只 是 进行 了 翻转 并 转换 到 与 屏幕 的 右 侧 对 齐 。 每 一 
侧 的 幕布 后 面 都 有 一 个 幕布 阴影 ， 它 们 是 由 相同 的 路 径 生 成 但 略微 有 一 些 
偏 移 ， 并 且 都 有 50% 的 不 透明 度 。 



































图 9-15; 使 用 SVG 创建 悬挂 幕布 的 舞台 


最 后 ， 顶 部 的 幕布 覆盖 在 其 他 幕布 之 上 ， 且 就 像 侧面 幕布 那样 使 用 非常 复 
杂 的 有 40 个 结 点 的 线性 渐变 填充 ， 这 是 通过 试验 和 排 错 确定 的 。 它 同样 有 
一 个 偏 移 的 阴影 。 


该 图 片 完 整 的 代码 如 例 9-8 所 示 。 
例 9-8 使 用 复杂 且 分 层 的 渐变 创建 一 个 舞台 


<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xLink="http: //www.w3.org/1999/xLink" 
width="100%" height="100%" viewBox="0 © 1000 650" 
id="curtains" > 
<title xml: lang="en">Stage Curtains</title> 
<style type="text/css"> 
.curtain-shadow { 
fill: black; 
fill-opacity: 0.5; (2) 

















w 


.side-curtain { 
fill: url(#side-curtain-gradient) ; 





-ceiling-curtain { 
Fill: url(#ceiling-curtain-gradient) ; 
} 
</style> 
<defs> © 
<path id="curtain" transform="scale(@.55)" 
d="m 0.319,0 0.252,1000 c 0,0 -2.761,40 44.129,30 
46.9,-10 38.6,-20 46.9,-10 8.3,0 27.4,10 47.4,0 19,-21 63,10 63,10 
0,0 11,10 44,0 33,-10 58,0 58,0 0,0 19,40 52,20 33,-30 34, -30 
34,-30 L 390,-0.53 z"/> 
<path id="ceiling-curtain" transform="scale(1,0.5)" 
d="m 0,0 1000,0 0,180 c 0,0 -26,17 -49,9 -22,-9 
-48,-32 -57,-18 -8,15 -31,3 -54,-5 -23,-9 -20,45 -49,23 -28,-23 
-11,11 -34,0 -23,-12 -23,-32 -46,-18 -22,15 -17,-8 -37,-8 -20,0 
-25,23 -54,11 -29,-11 -43,-25 -49,-3 -5,23 -5,23 -28,0 -23,-22 
-46,6 -46,6 0,0 -28,12 -43,-3 -14,-14 -54,-8 -54,6 0,14 -23,20 
-31,3 -9,-17 8,26 -29,8 -37,-17 -11,-34 -40,-17 -29,17 -49,-3 
-63,-5 -14,-3 -14,37 -28,25 -15,-11 -9,-14 -32,-17 -23,-3 -28,37 
-46,23 C 114,186 120,157 106,169 91.4,180 85.7,214 74.3,203 
62.9,1912 60,171 48.6,177 37.1,183 25.7,203 25.7,203 L 2.86,177 C 
0,171 0,0 0,0 z"/> 
<linearGradient id="side-curtain-gradient"> @ 
<stop stop-color="#800000" offset="0"/> 
<stop stop-color="#c00000" offset="0.08"/> 
<stop stop-color="#e00000" offset=".15"/> 
<stop stop-color="#800000" offset="0.24"/> 
<stop stop-color="#400000" offset="0.26"/> 
<stop stop-color="#600000" offset="0.28"/> 
<stop stop-color="#800000" offset="0.30"/> 
<stop stop-color="#c00000" offset="0.33"/> 
<stop stop-color="#800000" offset="0.41"/> 
<stop stop-color="#c00000" offset="0.56"/> 
<stop stop-color="#800000" offset="0.75"/> 
<stop stop-color="#400000" offset="0.82"/> 
<stop stop-color="#800000" offset="0.89"/> 
<stop stop-color="#C00000" offset="0.94"/> 
<stop stop-color="#800000" offset="1"/> 
</lLinearGradient> 
<linearGradient id="ceiling-curtain-gradient"> 
<stop stop-color="#400000" offset="0"/> 
<stop stop-color="#700000" offset="0.013"/> 
<stop stop-color="#800000" offset="0.013"/> 
<stop stop-color="#C00000" offset="0.03"/> 
<stop stop-color="#D00000" offset="0.04"/> 
<stop stop-color="#C00000" offset="0.05"/> 
<stop stop-color="#600000" offset="0.065"/> 
<stop stop-color="#B00000" offset="0.078"/> 
<stop stop-color="#D00000" offset="0.09"/> 





<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 
<stop 


stop-color="#800000" 
stop-color="#A00000" 
stop-color="#D00000" 
stop-color="#C00000" 
stop-color="#600000" 
stop-color="#D00000" 
stop-color="#800000" 
stop-color="#C00000" 
stop-color="#600000" 
stop-color="#800000" 
stop-color="#C00000" 
stop-color="#800000" 
stop-color="#D00000" 
stop-color="#800000" 
stop-color="#E00000" 
stop-color="#A00000" 
stop-color="#D00000" 
stop-color="#800000" 
stop-color="#D00000" 
stop-color="#800000" 
stop-color="#D00000" 
stop-color="#800000" 
stop-color="#C00000" 
stop-color="#D00000" 
stop-color="#800000" 
stop-color="#C00000" 
stop-color="#E00000" 
stop-color="#800000" 
stop-color="#C00000" 
stop-color="#E00000" 
stop-color="#800000" 
stop-color="#C00000" 


</linearGradient> 


<linearGradient id="stageGradient" x2="0" y2="1"> 


<LinearGradient id="shadowGradient" x2="0" 


offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 
offset="0. 


12"/> 
135" /> 
145"/> 
16"/> 
19” Js 
21"/> 
24" /> 
28" /> 
32"/> 
33"/> 
34" /> 
37" ES 
39" /> 
42" /> 
46" /> 
51"/> 
55"/> 
57"/> 
61"/> 
67"/> 
69" /> 
71"/> 
74" [> 
76" /> 
78" /> 
80" /> 
83" /> 
86" /> 
88" /> 
91" /> 
94" /> 


offset="1"/> 


<stop stop-color="#100800" offset="0"/> 


<stop stop-color="saddleBrown" offset="0.97"/> 


<stop stop-color="#A06020" offset="0.97"/> 
<stop stop-color="saddleBrown" offset="1"/> 
</linearGradient> 


<stop stop-opacity="0.6" offset="0" /> 
<stop stop-opacity="0" offset="0.97"/> 
</linearGradient> 
<radialGradient id="spotlightGradient" cy="0.9" fy="0.6"> 


<stop stop-color="#FFFFFF" offset="0" 


stop-opacity="0.4"/> 


<stop stop-color="#FFFFFF" offset="0.35" 


stop-opacity="0.1"/> 


© 


y2="1"> QO 
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<stop stop-color="#000000" offset="1" 
stop-opacity="0"/> (7) 
</radialGradient> 


<rect id="stage" width="1000" height="330" y="260" /> 
</defs> 


<rect id="background" width="100%" height="100%" 
fill="black"/> 


<g id="stage-illuminated"> 
<use xlink:href="#stage" fill="url(#stageGradient)"/> 
<use xlink:href="#stage" fill="url(#shadowGradient)"/> 
<use xlink:href="#stage" fill="url(#spotlightGradient)"/> 


</g> 


<g id="side-curtain-left" > © 
<use xlink:href="#curtain" class="curtain-shadow" 
x="-1" y="3"/> 
<use Xlink:href="#curtain" class="side-curtain"/> 


</g> 

<g id="side-curtain-right" 
transform="translate(1000,0) scale(-1,1)"> © 
<use xlink:href="#side-curtain-left"/> 

</g> 

<g id="ceiling-curtain"> D 


<use Xlink:href="#ceiling-curtain" class="curtain-shadow" 
x="5" y="5" /> 
<use xlink:href="#ceiling-curtain" 
class="ceiling-curtain"/> 
</g> 
</svg> 
O <svg> 元 素 上 的 id 使 整个 场景 可 以 在 另 一 个 图 片 (虽然 你 必须 把 标记 
导入 到 其 他 文件 中 使 所 有 样式 能 够 在 Web 浏览 器 中 正常 工作 ) 中 重复 
使 用 。 


O 幕布 的 fill 值 使 用 CSS 规则 来 设置 。 特 别 是 幕布 的 阴影 ， 它 是 简单 地 
通过 使 用 半 透 明 的 黑色 渐变 进行 填充 来 代替 的 。 


© 两 个 复杂 的 path 元 素 ， 一 个 是 侧 边 的 幕布 ， 另 一 个 是 天 花 板 下 幕布 的 边 
缘 。 它 们 都 没有 直接 设置 样式 属性 ， 而 是 在 使 用 <use> 元 素 复制 时 添加 


O 表示 幕布 的 前 两 个 <linearGradient> 对 象 设计 过 程 中 尽量 与 <path> 元 素 
匹配 。 许 多 SVG 图 片 编辑 器 都 有 可 视 化 工具 来 使 这 项 工作 更 加 容易 ， 当 
然 有 一 些 不 足 之 处 也 是 不 可 避免 的 。 











加 











© pl GU Ra o 第 一 个 是 从 上 到 下 填充 木 制 的 颜色 ， 在 底部 
绘制 舞台 边缘 的 地 方 有 一 个 锐利 的 过 渡 。 


QO shadowGradient 使 用 默认 的 黑色 stop-color， 然 后 调整 stop-opacity 而 
不 是 创建 额外 的 层 作为 舞台 从 后 到 前 (长 方形 从 上 到 下 ) 的 阴影 。 把 它 
应 用 为 单独 的 一 层 是 为 了 方便 之 后 通过 色相 来 调整 亮度 


O 创建 聚光灯 的 <radialGradient> 同样 布局 在 舞台 之 上 ， 所 以 它 同样 使 用 
了 stop-opacity 属性 来 允许 下 面 的 层 露出 来 。 


O 在 绘制 一 个 纯 黑 色 背 景 之 后 ， 舞 台 还 使 用 相同 的 长 方形 绘制 三 次 ， 来 布 
局 三 个 不 同 的 渐变 。 这 个 完美 的 使 用 分 层 填充 的 例子 表达 了 对 SVG 2 的 
功能 的 迫切 期 待 一 一 它 将 允许 舞台 绘制 在 单独 的 形状 上 ， 然 后 三 个 渐变 
一 起 填充 。 


O 左 侧 的 幕布 是 通过 一 起 布局 两 个 版 本 的 幕布 形状 进行 绘制 ， 一 个 添加 了 
阴影 样式 ， 另 一 个 是 幕布 的 主要 样式 。 


O 右 侧 的 幕布 通过 复制 和 转换 左 侧 的 幕布 来 绘制 。 
@ 国 最 后 ， 天 花 板 上 的 幕布 使 用 同样 的 布局 方法 绘制 。 


虽然 例 9-8 中 包含 许多 代码 ， 但 相 较 于 本 书 中 的 大 多 数 例子 ， 它 作为 图 片 
文件 依然 是 相对 较 小 的 : 可 编辑 的 文本 有 7KB， 通 过 gzip 压缩 之 后 只 剩 下 
1.4KB。 相 比 而 言 ， 相 同 图 片 的 PNG 版 本 ， 要 想 填 满 桌面 显示 的 大 部 分 区 
tk, 要 超过 80KB 的 大 小 。 


























颜色 弹性 过 渡 的 网 格 渐变 

兽人 台 与 幕布 的 例子 既 优雅 ， 也 非常 便于 使 用 Bye ie BE GR ATE 
好 是 平行 的 ， 所 以 正好 使 用 线性 渐变 。 但 在 普遍 情况 下 ， 这 样 的 描述 往往 
并 不 准确 ， 对 象 的 颜色 和 阴影 会 BRENTA LETER 而 不 只 是 平行 线 
或 顶 圆 。 目 前 ， 不 管 重建 何 种 类 别 的 复杂 阴影 图 案 ， 你 只 能 同时 布局 多 种 
不 同 的 半 延 明 渐 变 。 

SVG 2 中 引入 了 一 个 描述 复杂 二 维 颜色 过 渡 的 方法 ， 我 们 称 之 为 网 格 渐变 。 
网 格 是 直线 或 曲线 交叉 形成 的 格子 。 渐 变 颜 色 的 结 点 被 分 配 到 这 些 路 径 的 
交点 上 上， 渐变 的 每 一 片 (四 条 曲线 围 起 来 的 区 域 ) 的 颜色 也 是 基于 它们 的 
值 来 插入 。 你 可 能 不 会 通过 手动 编码 来 生成 网 格 渐变 ，Adobe Illustrator 和 
Inkscape 已 经 支持 渐变 网 格 的 创建 ， 并 且 SVG 提案 的 设计 也 是 兼容 它们 的 。 





网 格 渐变 太 复 杂 了 ，CSS 还 没有 与 之 对 应 的 候选 渐变 函数 。 但 是 ，CSS 
Image Values and Replaced Content Module Level 4 中 引入 了 一 个 更 加 易于 
管理 的 新 的 渐变 函数 conic-gradient()， 以 及 它 的 变形 repeating-conic- 
gradient() 。 


锥 形 渐 变 是 一 种 颜色 会 随 着 你 围绕 中 心 点 做 圆周 运动 而 改变 的 渐变 ， 每 一 
种 颜色 都 沿 着 从 中 心 点 发 散 出 来 的 射线 尽 可 能 地 扩展 。 不 同 于 径 向 渐变 ， 
径 向 渐变 的 颜色 是 沿 着 焦点 发 散 的 射线 而 改变 ， 而 在 同心 圆 上 是 一 样 的 。 
锥 形 渐变 的 结 点 不 是 通过 固定 的 距离 而 定义 ， 而 是 通过 固定 的 角度 来 定义 。 
提议 的 CSS 语法 将 使 用 at 关键 词 (可 选 ) 来 描述 中 心 点 的 位 置 (默认 情况 
下 ， 是 图 片 的 中 心 )， 这 与 径 向 渐变 的 语法 相同 。 接 着 是 结 点 的 列表 ， 偏 移 
使 用 角度 单位 或 整个 圆 的 百分比 来 描述 。 零 度 表 示 的 是 从 中 心 点 朝 上 的 重 
BR. 0 ~ 360° 之 外 的 角度 将 会 被 裁剪 。 与 其 他 CSS 渐变 一 样 ， 没 有 定 
义 偏 移 值 的 颜色 结 点 将 均匀 分 配 。 


下 面 列 出 了 一 些 合法 的 锥 形 渐变 语法 : 


/* a hue color wheel */ 
conic-gradient(red,yellow, lime,cyan,blue,magenta,red); 


/* oscillating orange rays */ 
repeating-conic-gradient(at top left, 
tomato, gold 10deg); 


/* checkerboard */ 
conic-gradient(black 0 25%, white 25% 50%, 
black 50% 75%, white 75% 100%); 


最 后 一 个 例子 使 用 另 一 种 在 4 级 规范 中 介绍 的 简写 方式 ， 它 将 适用 于 所 有 
的 CSS 渐变 函数 。 当 一 个 渐变 包括 一 个 纯色 区 域 时 ， 你 可 以 列 出 单独 颜色 
值 的 两 个 偏 移 ， 而 不 一 定 非 要 定义 连续 两 个 颜色 相同 的 结 点 。 


编写 本 书 时 ， 锥 形 渐变 在 任何 浏览 器 中 者 没有 直接 支持 。Lea Verou，CSS 
工作 组 的 一 员 ， 创 建 了 一 个 JavaScript polyfill， 使 用 HTML canvas 把 锥 形 
渐变 的 声明 转变 为 静态 图 片 。 

因为 CSS 渐变 函数 将 可 以 直接 在 SVG 2 中 使 用 ， 所 以 目前 没有 创建 专门 的 


SVG 狼 形 渐变 元 素 的 计划 。 但 是 相同 的 〈 或 者 非常 接近 的 ) 效果 可 以 使 用 
网 格 渐变 来 创建 。 
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磁 贴 与 纹理 


在 第 5 章 介绍 演 染 服务 时 ， 我 们 提 到 你 可 能 希望 使 用 多 种 不 同 的 资源 来 绘 
制 一 个 形状 : 单一 的 颜色 、 一 个 或 多 个 渐变 、 重 复 图 案 、 位 图 、 文 本 ， 甚 














至 是 其 他 SVG 文件。 到 目前 为 止 














， 我 们 已 经 介绍 了 如 何 使 用 纯色 或 单个 渐 


变 来 进行 绘制 。 对 于 所 有 其 他 可 能 的 选项 ， 我 们 都 将 使 用 一 个 单独 的 泻 染 


服务 元 素 : <pattern>。 





一 个 SVG 图案 定义 了 一 个 可 作为 其 他 形状 的 泻 染 服务 的 SVG 图形 块 。 我 


们 可 以 使 用 任何 SVG 内 容 ， 包 括 





图 片 、 文 本 以 及 使 用 渐变 填充 的 形状 。 图 


案 是 一 种 重复 矩形 (或 转换 后 的 矩形 ) 磁 贴 (tile) 的 布局 。 你 也 可 以 制作 
一 个 形状 相同 大 小 的 单个 磁 贴 来 创建 一 个 没有 重复 的 填充 ， 这 为 我 们 提供 
了 更 多 的 可 能 ， 在 第 11 章 中 将 分 别 进行 讨论 。 


有 多 种 可 选 方案 来 设置 磁 贴 和 图 案 内 容 的 大 小 。 这 使 得 许多 不 同 的 设计 成 





为 可 能 ， 但 也 有 些 依然 很 难 实现 。 


本 章 会 试图 讲解 什么 可 以 实现 而 什么 无 


法 实现 ， 并 且 给 一 些 不 尽 如 人 意 的 情况 提供 了 变通 方案 。 我 们 也 比较 了 





图 案 。 
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SVG 图 案 和 重复 CSS 背景 图 片 ， 后 者 是 许多 Web 设计 师 都 熟悉 的 一 种 重复 

















10-1: 使 用 简单 的 重复 条 纹 图 案 填充 的 形 ; 


10.1 搭 积 木 


许多 时 候 ，<pattern> 元 素 与 前 儿童 介绍 的 渐变 很 相似 。 元 素 本 身 的 属性 定 
义 了 形状 以 及 图 案 磁 贴 (重复 单元 ) 的 尺寸 。<pattern> 的 子 内 容 组 成 了 绘 
制 到 屏幕 上 的 图 形 。 


<linearGradient> 和 <radialGradient> 上 的 属性 分 别 与 <Ltne> 和 <circle> 
匹配 ， 而 <pattern> 上 的 几何 属性 与 <rect> 或 <image>: x, y, width 和 
height 类 似 。 它 们 的 默认 值 都 是 0， 通常 情况 下 ，width 或 height 为 0 时 内 
容 不 会 被 绘制 。 


为 了 理解 图 案 是 如 何 工作 的 ， 最 好 的 做 法 是 先 运 行 一 个 示例 。 例 10-1 给 出 
了 一 个 简单 的 条 纹 图 案 的 代码 ， 并 用 它 填 充 了 两 个 形状 。 图 10-1 显示 了 运 
行 结果 。 
例 10-1 使 用 简单 的 重复 条 纹 图 案 填充 形状 

<svg xmLns="http://www.w3.org/2000/svg" 


xmlns:xlink="http: //www.w3.0rg/1999/xlink" 
width="4in" height="3in" > 
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<title xml: lang="en">Striped Pattern</title> 
<style type="text/css"> 
svg { 
stroke-width: 6px; 


</style> 

<pattern id="stripes" x="5%" width="10%" height="100%"> 
<line x1="3" x2="3" y2="100%" stroke="maroon" /> 
<line x1="9" x2="9" y2="100%" stroke="gold" /> 
<line x1="15" x2="15" y2="100%" stroke="tomato" /> 

</pattern> 


<g stroke="royalBlue" fill="url(#stripes) "> 
<rect x="0.1in" y="0.1in" width="3.8in" height="1in" /> 
<ellipse cx="50%" cy="2.1in" rx="1.2in" ry="0.8in" /> 
</g> 
</svg> 


图 案 本 身 通 过 如 下 代码 声明 : 


<pattern id="stripes" x="5%" width="10%" height="100%"> 


id 属性 ， 和 其 他 泻 当 服务 一 样 是 必需 的 ， 这 样 图 案 才 能 使 用 。wtdth 和 
height 属性 定义 了 每 个 重复 磁 贴 的 尺寸 。 磁 贴 从 水 平 偏 移 x 和 垂直 偏 移 y 
(这 里 使 用 默认 的 0) 的 点 开始 排列 。(x,y) 点 定义 了 被 引用 的 磁 贴 左上 角 
的 位 置 ， 剩 下 的 磁 贴 之 后 再 上 下 左右 重复 多 次 来 填充 形状 。 

BBA width, height, x. y 是 如 何 计量 的 呢 ? 再 看 图 10-1， 注 意 两 个 形状 的 
不 同 之 处 。 两 个 形状 条 纹 的 宽度 是 一 样 的 ， 但 是 椭圆 中 条 纹 之 间距 离 更 近 。 
很 明显 宽度 不 是 一 个 绝对 值 。 


默认 情况 下 ， 控 制图 案 磁 贴 尺寸 的 属性 是 基于 objectBoundingBox 单位 来 计 
算 的 。 每 块 磁 贴 占 满 边界 盒 的 高 度 (100%)， 但 宽度 只 占 10%。 无 论 形状 
有 多 宽 ， 它 都 会 有 10 条 间隔 开 的 条 纹 。 

根据 渐变 中 的 经 验 ， 你 可 能 已 经 猜 到 磁 贴 默认 的 对 象 边界 盒 尺 寸 可 以 修改 


为 userSpaceonuse. 






































相关 的 属性 是 patternunits, 10.2 节 将 会 讲解 改变 它 后 所 产 
生 的 效果 。 


x 和 y 偏 移 也 是 基于 边界 盒 来 测量 的 。 在 例 10-1 中 ，5% 的 水 平 偏 移 是 10% 
的 磁 贴 宽度 的 一 半 。 这 样 第 一 个 完整 的 条 纹 会 从 边界 盒 的 左上 角 移 动 5% 的 
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距离 。 但 图 案 仍然 会 在 所 有 的 方向 上 进行 重复 : 在 椭圆 中 ， 你 在 左 侧 能 
到 另 一 个 条 纹 的 边缘 ， 这 是 因为 磁 贴 内 条 纹 的 宽度 大 于 5% 的 偏 移 。 

因此 ， 条 纹 本 身 并 没有 基于 对 象 边 界 盒 按 比例 缩放 。 默 认 情 况 下 ， 图 和 案 的 
内 容 是 基于 userSpace0nuUse 坐标 系 ( 即 实际 上 是 被 填充 形状 的 坐标 系 ) 计 
量 的 。 该 坐标 系 的 原点 被 变换 到 每 个 磁 贴 的 左上 角 。 


图 案 图 形 的 缩放 是 受到 <pattern> 元 素 上 的 patternContent- 
Units 属性 控制 的 。 它 的 默认 值 是 userSpaceonuse， 另 一 个 
可 选 值 是 objectBoundingBox。 









































条 纹 (三 个 <Line> TH) 被 扩展 到 SVG 整个 高 度 的 100%， 比 实际 所 需 
还 要 长 得 多 。 根 据 SVG 1.1 的 规范 ， 为 了 有 效 地 填充 形状 ， 图 案 应 该 使 用 
100% 的 值 。 然 而 ， 正 如 第 7 章 中 提 到 的 那样 ， 当 形状 岁 套 在 使 用 不 同 泻 染 
服务 的 SVG 元 素 中 时 ， 用 户 空间 单位 在 不 同 浏览 器 之 间 的 实现 是 不 一 致 的 。 
对 于 许多 图 案 的 设计 ， 有 必要 使 它 超出 图 形 的 大 小 来 确保 整个 磁 贴 都 被 
填充 ， 而 不 必 关 心 要 填充 的 形状 的 尺寸 是 多 少 。 图 案 元 素 默 认 会 设置 
overflow: hidden， 使 图 形 被 裁剪 到 磁 贴 的 大 小 。 


SVG 1.1 和 2 中 对 于 图 案 有 意 不 定义 使 其 可 见 的 overflow 
值 ， 以 此 来 应 对 SVG 1 中 实现 的 不 一 致 性 。 这 意味 着 每 个 浏 
览 器 都 可 以 用 它们 选择 的 方式 去 处 理 。 因 此 建议 一 般 不 要 去 
修改 它 的 值 。 






























































例 10-2 给 出 了 一 个 更 加 实际 的 例子 ， 使 用 的 图 案 会 基于 边界 盒 缩 放 ， 但 条 
纹 不 会 。 它 使 用 了 图 案 把 一 个 长 方形 分 割 为 固定 数量 的 相同 块 ， 每 一 个 都 
有 一 个 很 细 的 网 格 线 作 为 轮廓 。 这 种 覆盖 的 网 格 是 图 像 编 辑 软件 中 的 一 个 
常用 工具 ， 这 里 它 显 示 在 一 个 非常 简化 的 Web 应 用 中 ， 且 覆盖 在 一 个 图 片 
上 面 。 

为 了 证 实 图 案 磁 贴 的 缩放 效果 ， 照 片 的 缩 略 图 同样 包含 在 它 自己 的 网 格 中 。 
缩 略 图 上 的 网 格 更 小 一 些 ， 但 是 网 格 线 的 宽度 相同 。 在 这 两 个 例子 中 ， 实 
际 绘制 的 线 比 我 们 需要 的 宽 得 多 ,通过 隐藏 溢出 部 分 来 把 它 调 整 到 适合 的 
宽度 。 完 整 的 效果 如 图 10-2 所 示 。 
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Show Grid: 
© None © 2x2 ® 3x3 

















10-2: 以 相同 的 3 x 3 的 图 案 网 格 填充 不 同 尺寸 的 长 方形 


例 10-2 图 像 编 辑 应 用 内 的 一 个 大 小 可 变 的 网 格 图 案 
HTML 标记 和 JavaScript: 


<!DOCTYPE html> 

<html> 

<head> 
<meta charset="utf-8" /> 
<title>Photo Grid Overlay</title> 
<style type='text/css'> 
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/* styles must be in the same document */ 
</style> 
</head> 
<body> 
<fieldset id="grid-options" 
role="radiogroup" aria-controls="graphics"> 


<legend>Show Grid:</lLegend> (1) 

<label> 
<input type="radio" name="grid" value="none" checked> 
None</label> 

<label><input type="radio" name="grid" value="grid4"> 
2&times ;2</label> 

<label><input type="radio" name="grid" value="grid9"> 
3&times ; 3</label> 

</fieldset> 


<svg id="graphics" viewBox="0 0 400 400"> 
<title>Photo View</title> 
<pattern id="grid4" width="50%" height="50%" > (2) 
<g stroke="gold" stroke-width="4px"> 


<line x2="100%" /> © 
<line y2="100%" /> 
</g> 
</pattern> 


<pattern id="grid9" xlink:href="#grid4" 
width="33.33333%" height="33.33333%" /> @ 


<g> 
<title>Full image</title> 
<image width="400" height="300" 
xlink:href="cat.jpeg" /> 
<rect width="400" height="300" class="grid" /> © 
</g> 
<g transform="translate(140,310)"> 
<title>Thumbnail</title> 
<image width="120" height="90" 
xLink:href="cat. jpeg" /> 
<rect width="120" height="90" class="grid" /> 


</g> 
</svg> 
<script> 
document.getElementById("grid-options") 
.addEventListener("change", updateGrid); O 


function updateGrid(e) { 
var svg = document.getElementById("graphics"), 

radio = e.target; 

if (radio.checked) { 
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svg.setAttribute("class", radio.value); @ 


} 
} 
</script> 
</body> 
</html> 


@ 初始 的 HTML 标记 设置 了 一 个 小 的 表单 Field 来 用 于 选择 网 格 。 

O 内 联 SVG 代码 定义 了 <pattern> 元 素 。 图 案 使 用 默认 的 patternunits ix 
a: 图 案 磁 贴 的 宽 和 高 是 相对 于 边界 盒 的 百分比 。 

O 然而 它 的 内 容 是 绘制 在 用 户 空间 坐标 系 内 的 。 它 由 两 条 线 (组 合 在 一 起 
来 应 用 通用 的 样式 ) 组 成 ， 每 条 线 都 从 原点 开始 ， 然 后 沿 着 水 平 或 垂直 
方向 延伸 SVG 宽 或 高 的 长 度 ， 通 常 这 会 超出 图 案 磁 贴 的 边缘 。 


O 第 二 个 图 案 通 过 简写 的 方式 定义 ， 使 用 xlink:href 引用 了 第 一 个 图 案 ， 
RERET width 和 height 属性 的 值 。 和 渐变 一 样 ，xlink:href 属性 允 
许 一 个 <pattern> 元 素 作 为 其 他 元 素 的 模板 。 

O 剩 下 的 SVG 代码 描述 的 是 可 见 内 容 : 元 素 以 及 一 个 与 之 对 应 的 作为 网 
格 容器 的 元 素 。 

QO 简短 的 JavaScript 代码 段 用 于 监听 单 选 按钮 的 改变 。 

O 一 个 简单 的 函数 用 于 改变 <svg> 元 素 上 的 class， 来 使 用 合适 的 CSS 样 
式 。 在 这 个 简单 的 例子 中 ，setAttribute 方法 用 于 取消 之 前 设置 的 类 而 
给 它 应 用 一 个 新 的 类 。 对 于 更 加 复杂 的 应 用 程序 ， 在 操作 时 你 可 能 需要 
更 加 小 心 以 不 影响 其 他 的 类 。 

CSS 样式 : 


body { 
padding: 0.5em 0.25em; 
background-color: lightGray; 



































} 
fieldset { 
display: block; 
background-color: white; 
margin-bottom: 1em; (1) 
} 
legend { 
background-color: inherit; 
border-radius: 0.25em; 
padding: 0 0.2em; 
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svg { 
width: 100%; 
min-height: 300px; 


max-height: 100vh; (2) 
shape-rendering: crispEdges; 
} 
.grid { 
fill: none; 
pointer-events: none; © 


.grid4 .grid { 
fill: url(#grid4); (4) 
} 
.grid9 .grid { 
fill: url(#grid9); 
} 


@ 最 初 的 几 个 CSS 规则 控制 网 页 和 表单 元 素 的 整体 布局 。 

O <svg> 元 素 设置 了 最 小 高 度 和 最 大 高 度 ， 但 是 在 最 新 的 浏览 器 中 它 会 
根据 viewBox 属性 设置 的 宽 高 比 来 自动 调整 大 小 。shape-rendering: 
crispEdges 设置 关闭 矢量 图 形 的 抗 锯齿 效果 ， 否 则 可 能 会 使 网 格 线 看 起 
来 比较 模糊 。 

© 添加 grid 类 的 长 方形 将 默认 不 进行 填充 。pointer-events 使 它 无 论 有 没 
有 填充 都 没有 交互 效果 。 


© 当 grid4 或 grid9 类 添加 到 父 元 素 上 时 ， 网 格 和 矩形 将 使 用 合适 的 图 案 来 
填充 ， 通 过 一 个 匹配 的 id 来 区 分 。 


最 终 的 效果 满足 了 基本 功能 ， 但 是 并 不 理想 。 网 格 线 使 用 4px 的 描 边 宽度 ， 
但 是 一 半 宽 度 将 被 裁剪 掉 ， 因 为 描 边 的 中 心 在 网 格 磁 贴 的 边缘 线 上 。 这 就 
意味 着 我 们 只 能 看 到 矩形 上 边 和 左边 的 网 格 线 ， 而 看 不 到 右边 和 下 边 的 网 
格 线 。 因 此 交点 没有 完全 匹配 到 照片 宽 高 在 几何 上 的 平分 点 或 三 等 分 点 。 
SVG 图 案 中 没有 可 以 固定 它 的 简单 方式 。 当 我 们 给 磁 贴 尺寸 使 用 对 象 边界 
盒 单位 时 ， 你 无 法 通过 给 磁 贴 设置 固定 像素 的 偏 移 来 弥补 这 种 不 平衡 ， 因 
为 x 和 y 也 是 基于 边界 盒 单位 解析 的 。 并 且 由 于 网 格 线 是 基于 用 户 空间 单 
位 绘制 的 ， 所 以 没有 办 法 在 每 个 磁 贴 相对 的 边 上 设置 额外 的 线 。 


10.2 ”适当 拉 伸 


基于 默认 的 objectBoundingBox 单位 的 图 案 磁 贴 和 userSpaceOnUse 单位 的 图 
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案 内 容 设计 的 能 够 工作 良好 的 图 案 只 占 一 小 部 分 。 对 于 除了 细 条 纹 和 网 格 
= é 案 ， 你 通常 希望 图 形 缩放 到 与 图 案 磁 贴 相 匹配 的 大 小 。 换 名 话说， 你 

望 的 是 patternUnits 和 patternContentUnits 这 两 个 属性 有 相同 的 值 ， 
ie seen 或 userSpaceOnUse 都 可 以 。 


由 于 默认 值 不 匹配 ， 你 通常 只 需要 声明 其 中 一 个 。 设 置 


patternUnits = "userSpaceOnUse" 或 patternContentUnits = 























"objectBoundingBox"。 














当 图 案 磁 贴 和 它 的 内 容 都 是 基于 对 象 边界 盒 缩 放 时 ， 你 会 创建 一 个 能 适应 
被 填充 形状 的 图 案 。 每 个 盒子 中 的 磁 贴 的 数量 通常 都 是 相同 的 ， 整 个 图 案 
会 一 起 放大 或 缩小 。 


当 你 使 用 对 象 边 界 盒 单 位 时 ， 要 记 住 第 7 章 中 坐标 系 被 扭曲 的 教训 。 如 果 
盒子 不 是 正方 形 ， 坐 标 系 将 变 得 不 均匀 ， 水 平 单位 和 垂直 单位 会 不 相等 。 
圆 、 文 本 、 图 片 都 会 被 拉 伸 ， 旋 转 的 角度 也 不 均匀 。 还 要 注意 的 是 所 有 的 
一 切 都 会 根据 新 的 单位 来 缩放 ， 包 括 描 边 宽度 和 字体 大 小 。 

此 外 ， 对 于 patternContentUnits， 不 同 于 图 案 磁 贴 的 尺寸 ， 它 的 百分比 值 


不 可 以 与 小 数 互 换 。 基 于 用 户 空间 坐标 系 定义 的 100% 会 按 比例 放大 到 其 他 
单位 的 缩放 效果 。 
































无 论 使 用 什么 缩放 方式 ， 图 案 内 容 的 百分比 值 都 不 会 参考 图 
案 磁 贴 。 











如 果 主 视窗 宽 200 个 单位 (1% 是 2 个 水 平 单位 ) 高 150 个 单位 (1% 是 1.5 
个 垂直 单位 )， 在 缩放 的 坐标 系 中 1% 不 是 盒 宽 的 2 倍 、 盒 高 的 1.5 倍 。 在 
不 同 的 SVG 中 ， 比 例 是 不 相同 的 。 

它 通 常 没有 什么 用 处 ， 所 以 当 图 案 内 容 使 用 对 象 边界 盒 单 位 时 ， 要 尽量 避 
免 使 用 百分比 。 

当然 ， 你 可 以 使 用 小 数 ， 此 时 它 是 相对 于 边界 盒 宽 或 高 的 比例 。 


例 10-3 使 用 这 种 方法 来 调整 例 10-1。 现 在 彩色 条 纹 的 宽度 和 间距 都 会 被 缩 
放 来 适应 不 同 的 形状 ， 如 图 10-3 所 示 。 
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B 10-3: 基于 边界 念 缩放 的 重复 条 纹 图 案 填 充 的 形状 
例 10-3 使 用 缩放 的 重复 条 纹 图 案 填 充 形状 


<svg xmlns="http: //www.w3.org/2000/svg" 


xmlns:xLink="http: //www.w3.org/1999/xLink" 
width="4in" height="3in" > 
<title xml: lang="en">Bounding Box Striped Pattern</title> 
<style type="text/css"> 
svg { 
stroke-width: 6px; 
} 


</style> 
<pattern id="stripes2" x="5%" width="10%" height="100%" 
patternContentUnits="objectBoundingBox" 
stroke-width="0.025px" > (1) 
<line x1="0.0125" x2="0.0125" y2="1" stroke="maroon" /> 
<line x1="0.0375" x2="0.0375" y2="1" stroke="gold" /> @ 
<line x1="0.0625" x2="0.0625" y2="1" stroke="tomato" /> 
</pattern> 
<g stroke="royalBlue" fill="url(#stripes2)"> 
<rect x="0.1in" y="0.1in" width="3.8in" height="1in" /> 
<ellipse cx="50%" cy="2.1in" rx="1.2in" ry="0.8in" /> 
</g> 


</svg> 
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O 在 图 案 上 明确 设置 patterncontentunits A {AS patternUnits 的 默认 
值 相 匹配 。 图 案 内 容 将 继承 0.025px 的 描 边 宽度 ， 它 将 在 objectBoun- 
dingBox 中 解析 。 


O 线 的 坐标 同样 也 被 转换 为 对 象 边 界 盒 单 位 。 两 条 线 之 间 相 隔 0.025 个 单 
位 ， 第 一 条 线 以 图 案 磁 贴 边 的 宽度 的 一 半 为 中 心 。 三 条 线 加 上 与 之 大 小 
相等 的 间 隐 正好 是 0.1 个 单位 ， 或 者 说 是 边界 盒 宽度 的 10% (图 案 磁 贴 
的 确切 宽度 )。 

当 使 用 小 数 边界 盒 单 位 时 ， 通 常 最 简单 的 是 单独 使 用 数学 上 的 用 户 单位 ， 

不 要 受到 具体 单位 的 干扰 ， 因 为 它 将 脱离 它 在 现实 世界 的 意义 。 当 然 ， 你 

可 以 使 用 单位 ， 它 们 将 基于 用 户 单位 等 比例 缩放 ，stroke-width 的 值 可 以 

证 明 这 一 点 。 



































虽然 px 通常 可 以 与 SVG 用 户 单位 交换 (在 任何 坐标 系 中 )， 
但 是 Firefox (版 本 40) 在 stroke-width 定义 为 0.025px 时 ， 
会 四 舍 五 入 为 0.03px。 但 如 果 定 义 为 0.025 而 没有 单位 ， 它 
是 可 以 正确 演 染 描 边 的 。 








还 有 另 一 种 代替 方案 是 使 用 逐渐 变 小 的 小 数 作 为 坐标 。<pattern> 可 以 使 用 
viewBox 属性 来 给 每 个 磁 贴 定义 它 自 己 的 坐标 系 。 我 们 将 在 第 11 章 中 探讨 
viewBox 图 案 ， 以 及 对 象 边界 盒 图 案 的 更 多 用 途 ， 该 章 的 重点 是 创建 一 个 使 
用 单个 磁 贴 填充 整个 边界 盒 的 填充 内 容 。 


但 是 ， 对 于 重复 磁 贴 你 更 有 可 能 会 使 用 userSpaceOnUse 单位 。 


10.3 布局 磁 贴 


patternUnits 和 patternContentunits (默认 ) 的 值 都 为 userSpace0nUse 时 ， 
你 可 以 创建 一 个 国定 尺寸 的 磁 贴 ， 每 个 磁 贴 里 面 都 有 一 个 固定 尺寸 的 图 形 。 
这 种 结果 更 接近 现实 世界 的 磁 贴 ， 你 可 能 会 使 用 它们 铺 地 板 或 墙壁 。 磁 贴 
不 会 根据 地 板 区 域 的 大 小 而 改变 ， 只 不 过 铺 满 空间 所 需 的 磁 贴 数量 不 同 。 


例 10-4 改编 了 例 10-1 中 相同 的 条 纹 图 和 案 ， 但 是 这 次 我 们 固定 条 纹 的 尺寸 而 
去 调整 磁 贴 数量 。 结 果 如 图 10-4 所 示 。 
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B 10-4: 基于 用 户 空间 单位 的 重复 条 纹 图 案 填 充 的 形状 
例 10-4 使 用 基于 用 户 空间 单位 的 重复 条 纹 图 案 来 填充 形状 


<svg xmLns="http://www.w3.org/2000/svg" 

xmlns:xlink="http: //www.w3.0rg/1999/xlink" 
width="4in" height="3in" > 
<title xml: lang="en">UserSpace Striped Pattern</title> 
<style type="text/css"> 

svg { 

stroke-width: 6px; 
} 


</style> 
<pattern id="stripes3" x="12px" width="24px" height="10px" 
patternUnits="userSpaceOnUse"> 
<line x1="3" x2="3" y2="10" stroke="maroon" /> 


<line x1="9" x2="9" y2="10" stroke="gold" /> © 
<line x1="15" x2="15" y2="10" stroke="tomato" /> 
</pattern> 


<g stroke="royalBlue" fill="url(#stripes3)"> 
<rect x="0.1in" y="0.1in" width="3.8in" height="1in" /> 
<ellipse cx="50%" cy="2.1in" rx="1.2in" ry="0.8in" /> 
</g> 
</svg> 
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@ 这 次 明确 设置 patternUnits 的 值 与 patternContentUnits 的 默认 值 相 匹 
配 。 图 案 磁 贴 属性 重新 使 用 px 单位 来 定义 。 


O 线条 不 需要 拉 伸 到 SVG 高 度 的 100%， 因 为 我 们 知道 磁 贴 的 尺寸 ， 可 以 
设置 它 的 确切 值 。 

长 方形 和 椭圆 内 的 条 纹 不 仅 尺寸 相同 ， 而 且 完 美 对 齐 。 用 户 空间 图 案 磁 贴 
的 x 和 y 偏 移 是 相对 于 主 坐 标 系 的 原点 来 计算 的 ， 而 不 是 形状 边界 盒 的 角 。 
类 似 于 我 们 在 第 7 章 中 讨论 的 用 户 空 间 渐变 ， 这 可 以 创建 从 一 个 形状 到 另 
一 个 形状 一 致 的 泻 染 流 除非 形状 被 变换 。 

因为 图 案 磁 贴 和 图 案 内 容 基 于 相同 的 坐标 系 ， 我 们 可 以 创建 比 无 限 拉 伸 直 
线 更 复杂 的 图 案 。 在 磁 贴 的 中 心 放置 一 个 圆 ， 调 整 图 标的 大 小 使 它 恰好 贴 
满 磁 贴 ， 或 者 使 用 <image> 来 填充 磁 贴 。 


当 你 希望 图 案 中 相 邻 的 磁 贴 能 够 平滑 过 渡 ， 就 好 像 图 10-4 中 垂直 的 条 纹 那 
样 ， 通 常 最 好 的 做 法 是 使 图 形 稍 大 于 图 案 磁 贴 。 在 一 些 SVG 查看 器 中 ， 你 
可 能 会 看 到 例 10-4 中 的 代码 创建 的 每 个 图 案 磁 贴 都 有 或 深 或 浅 的 边缘 ， 这 
是 由 于 浏览 器 对 形状 的 像素 格 进行 四 舍 五 人 处 理 导致 的 。 把 每 个 条 纹 从 
y1="-1" 延长 至 y2="11”( 而 非 0 到 10) 通常 可 以 解决 这 个 问题 ， 线 条 超出 
部 分 的 端点 会 被 裁 据 。 

你 可 以 利用 裁剪 效果 来 创建 初 看 起 来 不 是 通过 长 方形 重复 磁 贴 生成 的 图 案 。 
你 可 以 重复 形状 ， 重 又 磁 贴 相对 的 边 ， 这 样 当 磁 贴 一 个 挨 着 一 个 排列 时 ， 
形状 看 起 来 就 是 一 个 个 图 案 循环 呈现 。 


图 10-5 显示 了 一 个 重合 鳞片 的 图 案 ， 就 好 像 热带 鱼 的 鱼鳞 。 虽 然 最 小 重复 
单元 是 一 个 交错 重合 的 圆 ， 但 你 可 以 通过 绘制 从 一 个 鳞片 的 中 心 到 下 一 个 
鳞片 的 中 心 然后 转向 侧 边 直接 向 下 的 正方 形 来 创建 一 个 简单 的 长 方形 重复 
图 和 案 ， 如 图 下 半 部 分 所 示 。 例 10-5 提供 了 图 案 的 代码 ， 包 括 重复 单元 的 放 
大 版 本 。 


例 10-5 使 用 重合 形状 创建 复杂 的 图 案 
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xLink="http: //www.w3.org/1999/xlink" 
width="4in" height="6.5in" viewBox="0 0 400 650"> 
<title xml: lang="en">Fish Scale Pattern</title> 
<style type="text/css"><! [CDATA[ 
.scale { 
fill: url(#scale-gradient) ; 
stroke: black; 













































































} 
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]]> </style> 
<defs> 
<radialGradient id="scale-gradient"> (1) 
<stop stop-color="#004000" offset="0"/> 
<stop stop-color="green" offset="0.85"/> 
<stop stop-color="yellow" offset="1"/> 
</radialGradient> 
<pattern id="scales-pattern" width="20" height="20" 
patternUnits="userSpaceOnUse" > (2) 
<g id="scales"> 
<circle class="scale" cx="0" cy="19" r="10"/> © 
<circle class="scale" cx="20" cy="19" r="10"/> 
<circle class="scale" cx="10" cy="9" r="10"/> @ 
<circle class="scale" cx="0"  cy="-1" r="10"/> 
<circle class="scale" cx="20" cy="-1" r="10"/> @ 
</g> 
</pattern> 
</defs> 
<rect width="400" height="400" fill="url(#scales-pattern)"/> @ 
<g transform="translate(200,525) scale(5) translate (-10,-10 )"> 
<use Xlink:href="#scales" /> 
<rect width="20" height="20" fill="none" 
stroke="deepSkyBlue" stroke-width="0.5"/> O 
</g> 
</svg> 


@ <radialcradient> 用 于 填充 图 案 中 每 个 鳞片 。 


O 图 案 本 身 patternUnits 的 值 为 userSpace0nuse， 意 思 是 图 案 磁 贴 是 20px 
的 正方 形 ， 而 不 管 填充 形状 的 尺寸 。 


© 前 两 个 鳞片 分 别 以 图 案 磁 贴 下 边 的 角 为 中 心 。 

O 下 一 个 鳞片 近似 放置 在 磁 贴 的 中 心 ， 且 在 前 两 个 鳞片 的 上 边 。 然 而 ， 为 
了 避免 描 边 被 裁减 掉 ， 所 有 的 圆 都 向 上 移动 了 一 个 单位 。 

O 最 后 两 个 鳞片 以 磁 贴 上 边 的 角 为 中 心 。 它 们 会 覆盖 在 中 间 的 鳞片 之 上 ， 
且 与 磁 贴 下 面 一 行 的 鳞片 连 在 一 起 ， 且 同样 分 别 位 于 左边 和 右边 

O 图 形 中 上 边 的 长 方形 显示 的 是 图 案 连 续 填 充 的 鳞片 。 


O 图 形 的 下 半 部 分 ，<use> 元 素 复 制 了 一 份 五 个 鳞片 组 成 的 组 。 通 过 <g> 
元 素 上 的 transform 属性 ， 鳞 片 被 放大 五 倍 ， 之 后 给 磁 贴 添加 偏 移 使 它 
位 于 可 见 空间 的 中 心 。 

O HEH 20x20 的 长 方形 ， 同 样 绘制 在 被 放大 后 的 坐标 系 中 ， 它 描绘 
图 案 磁 贴 的 边界 轮廓 。 
































a 
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10-5: 用 于 填充 长 方形 的 鱼鳞 (E) 以 及 重复 图 案 磁 贴 单元 (F) 
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通过 这 种 方式 可 以 构建 许多 图 案 ， 但 可 能 另外 需要 一 些 数学 知识 来 计算 它 
的 尺寸 。 你 可 以 标识 出 重复 图 案 在 水 平和 垂直 位 移 上 的 确切 位 置 ， 这 有 助 
于 描绘 图 案 块 最 终 的 外 观 。 它 就 是 你 最 终 图 案 磁 贴 的 边界 。 






































CSS 与 SVG 

重复 背景 图 片 
在 CSS 布局 中 ,可 以 通过 背景 图 片 来 创建 重复 图 案 。 因 此 图 案 内 容 可 以 通 
过 任何 有 效 的 CSS 图 片 类 型 来 创建 : AMAA, SVG BH AA CSS 渐变 。 
默认 情况 下 ， 图 片 会 在 水 平和 垂直 两 个 方向 上 重复 来 创建 类 似 于 SVG AR 
的 磁 贴 效果 。 
起 初 ，CSS 背景 图 片 通常 以 图 片 本 来 的 尺寸 来 绘制 。 类 似 于 用 户 空间 图 案 ， 
改变 元 素 背景 的 尺寸 会 改变 重复 单元 的 数量 ， 而 不 会 缩放 它们 。 对 于 大 型 背 
景 图 片 来 说 这 似乎 没有 什么 用 ， 这 时 我 们 更 希望 它 能 够 缩放 到 适合 元 素 的 大 
小 ， 对 于 所 有 的 渐变 (以 及 部 分 SVG AA) 也 没有 什么 用 ， 因 为 它们 本 身 没 
有 尺寸 。CSS Backgrounds and Borders Module Level 3 中 引入 了 background-size 
属性 ， 它 允许 每 个 背景 图 片 可 以 缩放 到 一 个 固定 尺寸 或 者 元 素 的 百分比 。 


相 比 于 SVG AR, CSS 背景 图 片 也 有 一 些 优点 。 


。 使 用 background-repeat 属性 可 以 让 背景 只 在 一 个 方向 上 重复 或 根本 就 
不 重复 。 

。 background-size 属性 还 接受 一 个 auto 值 来 使 图 案 磁 贴 的 宽 或 高 缩放 到 
匹配 其 他 值 或 内 容 本 身 的 宽 高 比 。 

。 背景 可 以 有 多 层 ， 每 层 都 可 以 拥有 自己 的 尺寸 和 重复 设置 。 

正如 我 们 多 次 提 到 的 那样 ， 分 层 泻 染 服务 填充 将 在 SVG 2 中 加 入 。 在 第 11 

章 中 ,我 们 将 介绍 如 何 通 过 拼合 图 案 来 模拟 这 种 效果 。 重 复 的 控制 可 以 通 

过 创建 比 对 象 边界 金 更 宽 或 更 高 的 图 案 磁 贴 来 模拟 。 

使 用 CSS 背景 来 创建 图 案 效 有 果 的 主要 不 足 之 处 是 图 案 内 容 必 须 是 一 个 单独 

的 图 片 文件 (或 编码 为 data URI) ， 除 非 可 以 使 用 渐变 来 表示 。 虽 然 渐 变 可 

以 用 于 创建 块 和 条 纹 ， 但 在 一 些 浏览 器 中 其 泻 染 质量 明显 不 如 SVG 形状 。 


10.4 变换 磁 贴 


在 上 一 节 中 ， 我 们 介绍 了 如 何 通 过 在 每 一 个 磁 贴 内 包含 复杂 的 重复 单元 来 
创建 非 矩形 图 案 。 对 于 某 些 几何 图 案 ， 你 可 以 通过 使 用 坐标 系 变换 来 精简 
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代码 ， 同 时 实现 相同 的 效果 。 

patternTransform 属性 允许 旋转 、 倾 斜 、 缩 放 或 移动 图 案 。 变 换 不 仅 作 用 在 
图 案 的 内 容 ， 而 且 作用 在 整个 图 案 磁 贴 ， 作 用 在 磁 贴 端 到 端 平 铺 的 重复 图 案 。 
与 gradientTransform 类 似 ，CSS 变换 模块 重新 把 pattern- 
Transform 定义 为 一 个 表现 属性 ， 与 transform 样式 属性 意思 
相同 虽然 现在 任何 浏览 器 都 不 支持 。 














图 案 变换 使 得 创建 对 角 线 以 及 其 他 角度 的 图 案 变 得 很 容易 ， 不 需要 通过 三 
角形 学 来 计算 出 重复 的 线 之 间 精 确 的 水 平 或 垂直 距离 。 例 10-6 中 使 用 45 度 
的 旋转 来 创建 斜 的 细 条 纹 和 网 格 图 和 案 。 本 例 中 还 演示 了 使 用 图 案 作 为 另 一 
图 案 的 模板 的 多 种 方式 。 最 终结 果 如 图 10-6 所 示 。 


例 10-6 使 用 patternTransform 创建 对 角 图 案 


<svg xmlns="http://www.w3.0rg/2000/svg" 
xmlns:xlink="http://www.w3.0rg/1999/xlink" 
width="4in" height="4in" viewBox="0 © 400 400"> 
<title xml: lang="en">Pinstripe Patterns</title> 

















<defs fill="#444" stroke="LightSkyBlue"> (1) 
<pattern id="pinstripe" patternUnits="userSpaceOnUse" 
width="30" height="30"> © 


<rect id="r" width="30" height="30" 
stroke="none" /> 

<line id="L" x1="15" y="0" x2="15" y2="30" 
fill="none" /= 


</pattern> 
<pattern id="diagonals" xlink:href="#pinstripe" 
patternTransform="rotate(45)" /> © 
<pattern id="grid" xlink:href="#pinstripe"> 
<use xlink:href="#r" /> (4) 


<use Xlink:href="#l" /> 
<use Xlink:href="#l" transform="rotate(90, 15, 15)"/> 


</pattern> 
<pattern id="diagonal-grid" xlink:href="#grid" 
patternTransform="rotate(45)" /> (5) 
</defs> 


<rect width="200" height="200" 
fill="url(#pinstripe)" /> 

<rect width="200" height="200" x="200" 
fill="url(#diagonals)" /> 

<rect width="200" height="200" y="200" 
fill="url(#diagonal-grid)" /> 

<rect width="200" height="200" x="200" y="200" 
fill="url(#grid)" /> 

</svg> 








@ 四 个 图 案 使 用 相同 的 配色 方案 ， 通 过 这 里 的 <defs> 元 素 设置 。 和 形状 一 














样 ， 图 案 和 其 他 浑 染 服务 会 从 它们 所 处 的 环境 继承 样式 。 





@ BOW pinstripe 图 案 磁 贴 由 纯色 填充 的 正方 形 和 一 条 沿 着 中 心 垂 直 向 
下 的 线 组 成 。 磁 贴 相对 于 用 户 空间 坐标 系 的 尺寸 是 固定 的 。 


© diagonals 





图 案 复制 了 第 一 个 细 条 纹 图 案 ， 并 把 它 旋转 45 度 创建 了 对 角 线 。 


© grid 图 案 依然 使 用 pinstripe 图 案 元 素 作 为 模板 ， 并 继承 图 案 元 素 上 的 
属性 ， 但 它 通 过 复制 一 次 纯色 长 方形 和 两 次 线条 ， 并 把 其 中 一 条 旋转 90 


度 来 替换 





图 案 的 内 容 。 与 渐变 一 样 ， 只 要 <pattern> AFAR, EMS 


替换 模板 的 所 有 内 容 。 
O 最 后 一 个 图 案 复制 并 旋转 了 grid 图 案 。 


例 10-6 还 强调 了 图 案 与 其 内 容 是 如 何 根据 它们 在 文档 树 的 位 置 来 继承 样式 
的 。 图 案 不 会 继承 使 用 图 案 填 充 的 元 素 上 的 样式 。 









































XXX 


、 


Sexe 














10-6: 旋转 变换 前 后 的 细 条 纹 图 案 
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xLink:href 图 案 模板 和 图 案 样 式 继承 的 结合 意味 着 你 可 以 通 
过 改变 继承 的 样式 来 创建 颜色 不 同 的 图 案 ， 类 似 于 你 可 以 通 
过 设置 <use> 元 素 的 样式 来 创建 颜色 不 同 的 图 标 。 不 幸 的 是 ， 
SVG 规范 的 起 草 者 没有 考虑 到 这 种 可 能 性 ， 且 任何 已 经 测试 
的 训 览 器 都 没有 实现 这 种 方式 。 
然而 ， 规 范 中 也 没有 明确 说 明 复 制图 案 内 容 不 应 该 从 新 的 图 
案 中 继承 ， 所 以 在 未 来 这 可 能 会 有 所 改变 。 目 前 ， 在 原始 和 
复制 的 图 案 元 素 中 ， 所 有 继承 样式 都 是 相同 的 。 





















































这 种 对 角 线 效果 同样 可 以 使 用 对 象 边界 盒 图 案 磁 贴 创建 ， 但 在 7.4 节 中 的 经 
验 教训 依然 适用 。 对 象 边 界 盒 单 元 会 添加 自己 的 变换 ， 这 会 扭曲 旋转 的 角 
度 。 旋 转 45 度 将 会 创建 沿 着 边界 盒 对 角 线 的 线 ， 而 不 论 该 45 度 是 不 是 绝 
对 意义 上 的 45 度 。 





简写 的 hatch 图 案 

SVG 2 引入 了 一 个 新 的 澄 染 服 务 元 素 ， 它 将 大 大 简化 像 例 10-6 中 那样 的 条 
纹 图 案 的 创建 。 我 们 把 它 称 为 hatches， 它 们 也 用 于 消除 图 案 磁 贴 边 缘 的 
不 连续 (四 会 五 入 的 误差 所 致 )。 与 磁 贴 在 两 个 方向 上 重复 不 同 ， 它 本 身 是 
由 条 纹 组 成 的 。 条 纹 将 会 像 图 案 那 样 在 一 个 方向 上 平 铺 ， 但 它们 是 由 一 条 
连续 的 路 径 组 成 ， 且 在 另 一 个 方向 上 无 限 长 。 每 条 路 径 都 会 有 重复 的 部 分 ， 
但 和 它 会 作为 一 个 单独 的 元 素平 滑 地 泻 染 。 

hatch 图 案 通 过 <hatch> 元 素来 定义 ， 它 有 以 下 属性 : 


。 Xx 和 y (定义 第 一 个 条 纹 的 偏 移 位 置 ) 

e pitch (条 级 之 间 的 间隔 ) 

。 rotate (条 纹 的 角度 ) 

e hatchUnits 和 hatchContentUnits ( 值 4 userSpaceOnUse 或 objectBoundingBox, 
默认 情况 下 与 图 案 相 同 ) 

。 transform (等 同 于 patternTransform) 

。 xlink:href (引用 另 一 个 <hatch> 元 素来 作为 模板 ) 


hatch 元 素 和 包含 一 个 <hatchpPath> 元 素 ， 每 一 个 该 元 素 都 定义 了 一 条 线 或 路 
径 。 默 认 情 况 下 ， 路 径 是 一 条 垂直 线 (PAF RB <chatch> 的 变换 )。 你 还 
可 以 使 用 d 属性 来 提供 路 径 定 义 的 一 个 片段 : 你 指定 的 路 径 将 会 无 限 连接 
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在 一 起 。 因 此 如 下 代码 将 会 创建 无 穷 的 波浪 线 : 


<hatch hatchUnits="userSpaceOnUse" pitch="6"> 
<hatchPath stroke-width="1" 
d="c 0,4 8,6 8,10 8,14 0,16 0,20"/> 
</hatch> 


无 法 给 hatch 图 案 创建 背景 凑 色 ,因为 有 了 新 的 分 层 填 充 的 语法 ， 背 景 闫 
色 可 以 在 使 用 hatch 的 同时 定义 。 


通过 变换 ， 你 可 以 创建 平行 四 边 形 或 菱形 图 案 磁 贴 来 布局 ， 而 不 局 限于 简 
单 的 长 方形 。 对 于 大 多 数 可 预期 的 结果 ， 这 类 图 案 通 常 使 用 userSpaceOnUse 
效果 最 好 。 对 象 边界 盒 单 位 的 不 均匀 缩放 可 能 无 法 与 patternTransform 值 
完美 搭配 。 


图 10-7 显示 了 两 种 可 以 通过 变换 矩形 磁 贴 来 创建 的 几何 图 案 。 代 码 如 例 
10-7 所 示 。 


例 10-7 ”使 用 patternTransform 创建 三 角形 或 菱形 图 案 
<svg xmLns="http://www.w3.org/2000/svg" 
xmlns:xlink="http: //www.w3.0rg/1999/xlink" 
width="4in" height="6.5in" viewBox="0 0 400 650"> 
<title xml: lang="en">Transformed Patterns</title> 
<pattern id="triangles" patternUnits="userSpaceOnUse" 
width="20" height="17.32" 
patternTransform="skewX(30)"> (1) 
<rect width="30" height="20" fill="lightGreen" /> 
<polygon points="0,0 20,0 0,17.32" fill="forestgreen" /> @ 
</pattern> 
<pattern id="argyle" patternUnits="userSpaceOnUse" 
width="20" height="20" 
patternTransform="scale(2,4) rotate(45)"> 
<rect fill="mediumPurple" width="20" height="20"/> 
<rect fill="indigo" width="10" height="10"/> 
<rect fill="navy" width="10" height="10" 
x="10" y="10"/> 
<path stroke="lavender" stroke-width="0.25" fill="none" 
d="M0,5 L20,5 M5,0 L5,20 
MO,15 L20,15 M15,0 L15,20" /> O 




















© © 


</pattern> 


<rect width="400" height="325" fill="url(#triangles)" /> 
<rect width="400" height="325" y="325" 
fill="url(#argyle)" /> 
</svg> 
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图 10-7; 使 用 变换 的 图 案 磁 贴 创建 的 
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@ 第 一 个 图 案 使 用 30 度 的 倾斜 来 把 图 案 磁 贴 转 换 为 平行 四 边 形 。 每 个 磁 
贴 的 高 度 被 调整 为 等 边 三 角形 的 高 ， 三 角形 的 底 等 于 图 案 磁 贴 的 宽度 。 
O 该 步骤 的 结果 是 ， 填 充 未 变换 的 磁 贴 左上 和 角 的 <polygon> 三 角形 在 倾斜 
30 度 后 变 为 一 个 完美 的 等 边 三 角形 。 

O 第 二 个 图 案 使 用 不 均匀 的 缩放 以 及 45 度 的 旋转 来 创建 一 个 菱形 图 案 
磁 贴 。 

O 方 格 图 案 是 通过 使 用 两 个 位 于 相对 角 且 宽 和 高 都 为 磁 贴 一 半 的 长 方形 来 
创建 。 该 方 格 会 与 图 案 磁 贴 一 起 变换 来 创建 方 格 萎 形 。 

O 菱形 图 案 的 最 后 一 个 元 素 是 绘制 四 条 单独 的 直线 的 <path>， 它 们 用 于 平 
分 每 个 菱形 方 格 。 

例 10-7 中 的 两 个 图 案 都 在 垂直 和 水 平 上 重复 ， 并 且 都 可 以 不 使 用 变换 来 创 

建 。 但 这 将 导致 图 案 内 容 更 加 复杂 。 更 多 的 坐标 需要 进行 三 角形 计算 ， 并 

且 很 可 能 会 由 于 四 舍 五 人 导致 相 邻 的 磁 贴 之 间 出 现 不 连续 。 


























CSS 与 SVG 
复杂 的 重复 图 案 

CSS 背景 图 片 不 能 在 它们 的 宿主 形状 内 单独 变换 。 图 10-6 和 图 10-7 这 样 的 

图 案 有 两 种 创建 方法 。 

。 使 用 伪 元 素来 包 庄重 复 的 背景 ， 设 置 它 的 z-index 来 使 它 位 于 主 内 容 下 
面 ， 然 后 给 它 添加 transform 属性 来 应 用 旋转 、 倾 儿 和 缩放 。 确 保 伪 元 
素 的 display 为 block 且 大 于 它 的 父 级 元 素 (这 样 变换 的 时 候 不 会 漏出 
空白 点 ) ， 还 要 确保 父 级 元 素 的 overflow 设置 为 隐藏 。 

。 绘制 一 个 很 大 的 背景 ， 计 算 水 平和 垂直 方向 上 确切 的 重复 数量 ， 然 后 在 
每 个 背景 磁 贴 内 引入 变换 效果 。 这 种 方式 与 例 10-5 中 创建 重 登 的 鱼鳞 效 
RAM, 
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完美 的 图 片 图 案 





pattern 引出 了 我 们 在 第 10 章 中 探讨 的 重复 设计 。 然 而 ，SVG 中 的 
<pattern> 元 素 比 这 更 加 灵活 。 通 过 定义 适合 对 象 边界 盒 的 图 案 磁 贴 ， 你 可 











以 创建 不 通过 重复 而 填充 整个 形状 的 图 案 。 
那么 为 什么 要 这 样 做 呢 ? 一 是 能 够 同时 布局 多 个 泻 染 服务 。 二 是 使 用 图 片 

















填充 形状 ， 就 像 CSS 背景 图 片 那样 。 


之 前 我 们 已 经 简要 地 提 到 ，SVG 2 允许 在 一 个 单独 的 填充 声明 中 使 用 多 层 
泻 染 服务 ， 且 可 以 直接 使 用 图 片 来 作为 填充 值 ， 这 似乎 使 得 这 种 类 型 的 图 
案 显 得 很 多 余 。 然 而 ， 就 算 这 些 属性 都 可 用 ， 这 项 技术 在 创建 多 数 效 果 时 
也 必 不 可 少 。 


本 章 还 讨论 了 在 <pattern> 元 素 上 使 用 viewBox 和 preserveAspectRatio 属 
性 。 这 些 属性 在 全 图 像 填 充 时 尤其 重要 ， 它 们 也 可 以 与 重复 图 案 一 起 使 用 。 


11.1 层次 感 

在 第 9 章 最 后 的 例 9-8 中 ， 我 们 分 别 给 三 个 独立 的 矩形 使 用 不 同 的 渐变 填 
充 ， 创 建 了 聚光灯 照射 在 舞台 上 的 效果 。 这 种 方式 对 于 单个 形状 来 说 很 有 
用 ， 但 是 如 果 你 想 在 多 个 形状 中 使 用 相同 的 分 层 效 果 ， 这 种 方式 就 不 太 适 
合 了 。 此 时 就 应 该 使 用 图 案 了 。 一 个 图 案 可 以 包含 所 有 的 层 ， 把 它们 变 成 
一 个 单独 的 渲染 服务 来 供 其 他 形状 使 用 。 
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例 11-1 中 把 三 个 渐变 结合 在 一 个 <pattern> PAR (E— 7 Mal A — hl E 
来 像 颜色 亮度 不 均匀 的 球体 。 相 同 的 图 案 也 可 以 用 来 填充 文本 标题 ， 如 图 
11-1 所 示 。 


例 11-1 使 用 非 重 复 图 案 的 分 层 渐变 
<svg xmlns="http://www.w3.org/2000/svg" 
width="4in" height="6.5in" viewBox="0 0 400 650"> 
<title xml: lang="en">Multiple gradients</title> 
<defs> 
<linearGradient id="red-blue" y2="1"> (1) 
<stop stop-color="red" offset="0"/> 
<stop stop-color="blue" offset="1"/> 
</linearGradient> 
<linearGradient id="yellow-violet" y1="1" y2="0"> @ 
<stop stop-color="yellow" 
stop-opacity="0.9" offset="0.1"/> 
<stop stop-color="darkMagenta" 
stop-opacity="0" offset="0.5"/> © 
<stop stop-color="violet" 
stop-opacity="0.9" offset="0.9"/> 

















</linearGradient> 
<radialGradient id="flare" fx="0.2" fy="0.2" 
stop-color="white" > (4) 


<stop stop-color="inherit" 
stop-opacity="0" offset="0.75"/> 
<stop stop-color="inherit" 
stop-opacity="0.05" offset="0.85"/> 
<stop stop-color="inherit" 
stop-opacity="0.2" offset="1"/> 
</radialGradient> 
<pattern id="gradient-pattern" width="1" height="1" 
patternContentUnits="objectBoundingBox" > @ 
<rect width="1" height="1" fill="url(#red-blue)"/> 
<rect width="1" height="1" fill="url(#yellow-violet)"/> 
<rect width="1" height="1" fill="url(#flare)"/> O 
</pattern> 
</defs> 
<g fill="url(#gradient-pattern)"> (7) 
<circle cx="200" cy="180" r="180" /> 
<ellipse cx="110" cy="500" rx="110" ry="145" /> 
<text x="400" y="525" text-anchor="end" 
font-size="100px" font-family="serif" 
stroke="indigo">Layers</text> 
</g> 
</svg> 
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11-1: 分 层 渐变 图 案 填 充 的 形状 和 文本 
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@ red-blue 渐变 从 边界 盒 的 左上 角 向 右 下 角 ( 记 住 ，x2 默认 是 100%) 延 
伸 。 它 使 用 的 是 纯色 且 位 于 最 底层 。 


@ yellow-violet 渐变 从 边界 盒 的 左下 角 向 右上 角 延 伸 。 


© 该 渐变 局 部 透明 ， 在 中 点 位 置 完 全 透明 (stop-opacity="0") 以 允许 其 
他 层 显示 出 来 。 透 明 的 结 点 依然 需要 一 个 stop-color， 否 则 它 会 默认 为 
黑色 且 两 边 的 颜色 将 会 是 暗 灰色 的 色调 。 


O 白色 的 径 向 渐变 几乎 是 透明 的 ， 只 有 在 边缘 是 20% 的 不 透明 。 为 了 方便 
编辑 或 请 加 动画 ， 单 一 颜色 定义 在 渐变 元 素 上 ， 然 后 在 每 个 结 点 上 都 明 
确 指定 继 承 父 级 。 不 幸 之 处 是 stop-color 默认 不 会 继承 。 


© <pattern> 中 图 案 磁 贴 (默认 ) 和 内 容 (明确 指定 ) 使 用 的 都 是 
objectBoundingBox 单位 。 磁 贴 的 宽 和 高 都 设置 为 不 重复 填 满 整个 盒子 。 


O 渐变 层 通过 填充 <rect> 元 素来 绘制 ， 它 也 会 被 缩放 到 填充 整个 边界 盒 ， 
宽 和 高 都 是 1 个 单位 。 

O 组 元 素 上 使 用 Fill 表现 属性 来 设置 使 用 分 层 图 案 填充 ， 形 状 和 文本 将 会 
继承 该 值 。 然 而 ， 每 个 元 素 都 独立 继承 填充 属性 ， 且 使 用 它 自 己 的 边界 

图 11-1 中 的 图 案 ， 以 及 组 成 它 的 渐变 ， 会 根据 每 个 形状 (或 文本 元 素 ) 对 

象 边 界 盒 的 尺寸 来 拉 伸 。 对 于 抽象 的 渐变 ， 这 没有 什么 问题 。 但 对 于 其 他 

图 案 内 容 ， 这 种 扭曲 是 不 可 接受 的 。 

避免 扭曲 的 一 种 方式 是 给 图 案 内 容 使 用 userSpaceOnuse 单位 。 然 而 ， 这 样 

的 话 图 案 就 不 会 缩放 到 适合 形状 的 大 小 。 此 外 ， 坐 标的 位 置 是 相对 于 图 形 

的 整体 空间 ， 而 不 是 对 象 本 身 。 如 果 移 动 对 象 ， 它 的 坐标 就 会 改变 ， 图 案 

会 保持 相对 于 背景 固定 。 

通过 相对 于 坐标 系 中 一 个 固定 的 点 来 定义 形状 ， 然 后 在 <use> 元 素 上 使 用 

变换 或 x 和 y 属性 (和 变换 有 相同 效果 ) 来 把 它 移动 到 合适 的 位 置 ， 我 们 

可 以 处 理 定 位 的 问题 。 要 想 解 决 缩放 的 问题 ， 只 能 使 用 <symbol> 元 素 或 能 

套 的 SVG 来 为 每 个 要 填充 其 整个 宽 和 高 的 形状 创建 一 个 单独 的 坐标 系 。 当 

然 ， 这 一 切 昕 起 来 都 会 增加 许多 额外 的 工作 和 复杂 性 。 

幸运 的 是 ， 还 有 一 个 选项 可 以 控制 <pattern> 内 容 的 缩放 : 定义 一 个 

viewBox 并 使 用 preserveAspectRatio 来 保证 它 不 会 被 扭曲 。 
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11.2 保持 原始 图 案 


如 果 没 有 viewBox 属性 ， 你 的 SVG 就 不 能 很 好 地 工作 ， 尤 其 是 在 Web E- 
把 它 设 置 在 你 的 根 <svg> 元 素 上 ， 它 会 建立 基本 的 坐标 系 以 及 宽 高 比 ， 以 
允许 你 的 图 形 可 以 缩放 到 设置 的 任何 区 域 。 它 也 可 以 用 在 肯 套 的 <svg> 元 
素 上 和 重复 使 用 的 symbol 中 来 创建 局 部 缩放 的 效果 。 
viewBox 可 以 定义 四 个 数字 : 前 两 个 定义 的 是 你 要 在 图 形 中 包含 的 最 小 点 的 
(x,y) 坐标， 而 第 三 个 和 第 四 个 数字 分 别 表示 的 是 图 形 包含 的 宽 和 高 的 单位 
数 。 通 常 前 两 个 数字 都 是 0 〈 所 以 原点 在 左上 角 且 图 形 中 所 有 的 坐标 值 都 是 
正 的 ) 或 负 值 (用 于 把 坐标 原点 放置 在 图 形 中 心 )。 
preserveAspectRatio 属性 很 容易 被 我 们 忽视 ， 因为 它 的 默认 值 往往 就 是 你 
需要 的 值 。 它 可 以 设置 为 以 下 三 种 缩放 模式 的 一 种 。 

meet 在 不 扭曲 的 情况 下 ,缩放 你 整个 viewBox 区 域 到 正好 全 部 显示 在 〈 紧 

贴 边缘 ) 可 见 空间 内 。 

slice 放大 viewBox 到 覆盖 整个 可 见 空间 (多 余部 分 会 被 裁减 邱 ) 

none 按 需 要 拉 伸 或 压缩 viewBox 到 正好 在 两 个 方向 上 填充 可 见 空间 。 


对 于 meet 和 slice， 必 须 还 要 定义 一 个 类 似 于 xMinYMax 的 基准 值 来 控制 
viewBox 区 域内 哪个 点 与 绘制 矩形 对 等 的 点 相对 准 。 


在 <pattern> 元 素 中 ，viewBox 属性 会 覆盖 patternContentUnits 的 设置 并 
给 你 的 图 案 创建 自己 的 坐标 系 。 就 任何 preserveAspectRatio 属性 值 而 言 ， 
viewBox 创建 的 坐标 系 都 将 缩放 到 适合 图 案 磁 贴 。 


在 Firefox 40 (2015 年 中 发 布 ) 之 前 ，viewBox 以 及 任何 
preserveAspectRatio 值 是 在 转换 为 对 象 边 界 盒 之 后 应 用 的 
(忽略 patternContentUnits 的 值 )。 这 会 导致 非 正 方形 边界 
盒 中 的 图 案 被 扭曲 ， 即 使 图 案 的 宽 高 比 与 形状 完全 匹配 。 
















































































因为 meet 会 维持 图 案 的 宽 高 比 来 缩放 到 适合 可 见 空间 的 整个 宽 和 高 ， 这 可 
能 会 导致 图 案 周 围 的 内 容 出 现 空白 。 这 包括 xMidYMid meet 值 应 用 在 定义 
viewBox 而 没有 定义 preserveAspectRatio 的 元 素 上 时 。 

有 一 种 方式 是 有 意 地 在 你 的 图 案 内 绘制 一 个 比 viewBox 更 大 的 背景 元 素 。 该 
背景 会 被 裁剪 到 图 案 磁 贴 的 大 小 ， 且 viewBox 将 会 缩放 到 适合 它 的 大 小 。 例 
11-2 中 使 用 这 种 方式 创建 了 一 个 填补 的 圆 形 渐变 并 保持 了 它 的 本 来 形状 ， 
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而 忽略 要 填充 形状 的 宽 高 比 。 保 持原 始 形状 的 渐变 绘制 在 一 个 正方 形 形 状 
内 (也 可 以 使 用 circte)。 该 正方 形 会 填充 整个 viewBox, {H viewBox 通常 
不 会 填充 整个 图 案 磁 贴 。 


图 11-2 中 显示 了 渐变 图 案 的 结果 ， 并 填充 了 一 个 长 方形 。 





























11-2: 通过 固定 宽 高 比 的 图 案 而 放置 在 长 方形 盒子 内 的 圆 形 渐变 














例 11-2 ”使 用 固定 宽 高 比 的 图 案 创 建 一 个 永远 都 是 圆 形 的 新 变 


<svg xmLns="http://www.w3.org/2000/svg" 


width="100%" height="100%"> 0 
<title xml:lang="en">Always-Circular Gradient</title> 
<defs> 

<radialGradient id="radial"> (2) 


<stop stop-color="lightYellow" offset="0"/> 
<stop stop-color="yellow" offset="0.2"/> 
<stop stop-color="gold" offset="0.8"/> 
<stop stop-color="orangeRed" offset="1"/> 
</radialGradient> 
<pattern id="circular-gradient" width="1" height="1" 
viewBox="0 0 1 1"> © 
<rect width="5" height="5" x="-2" y="-2" 
fill="orangeRed"/> @ 
<rect width="1" height="1" 
fill="url(#radial)"/> (5) 
</pattern> 
</defs> 
<rect height="100%" width="100%" fill="url(#circular - 
gradient)" /> 
</svg> 
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O SVG (以 及 它 包含 的 长 方形 ) 占据 可 见 区 域 的 100%， 所 以 你 可 以 通过 
缩放 浏览 器 窗口 来 测试 不 同 的 宽 高 比 。 

O 径 癌 渐变 使 用 默认 的 位 置 和 尺寸 ， 所 以 它 将 放置 在 要 填充 形状 的 中 心 ， 
并 缩放 到 其 边界 盒 大 小 。 

O 图 案 也 会 填 满 整个 边界 盒 ( 宽 和 高 为 1， 且 patternunits 使 用 默认 值 )。 
viewBox 定义 了 内 容 单 位 ， 创 建 了 一 个 1:1 的 宽 高 比 ， 而 忽略 边界 盒 的 
尺寸 。 

O 背景 矩形 绘制 为 vitewBox 创建 的 正方 形 区 域 的 5 倍 大 小 ， 并 以 它 为 中 心 。 
背景 使 用 最 后 一 个 渐变 结 点 (填补 ) 中 相同 的 颜色 填充 。 

O 渐变 本 身 绘制 在 一 个 宽 和 高 正好 适合 viewBox 的 正方 形 内 。 

值得 注意 的 重要 一 点 是 ， 图 案 内 的 形状 是 通过 缩放 的 用 户 单 位 而 不 是 百 分 

比 定义 的 。 虽 然 viewBox 创建 了 新 的 坐标 系 原点 和 新 的 缩放 ， 但 它 没 有 创建 

一 个 定义 百分比 长 度 的 新 视 口 。 在 图 案 内 ， 百 分 比 长 度 会 基于 某 一 单位 按 

比例 缩放 ， 而 忽略 任何 viewBox 的 值 。 




















正如 对 象 边界 盒 单 位 中 提 到 的 ， 这 通常 并 没什么 用 且 不 可 预 
见 ， 所 以 应 避免 在 除 user SpaceOnUse 外 的 图 案 中 使 用 百分比 。 





























使 用 viewBox 而 非 对 象 边界 盒 单位 还 可 以 消除 图 案 磁 贴 缩放 和 图 案 内 容 缩 放 
之 间 的 相互 依赖 。 图 案 上 的 viewBox 通常 会 缩放 到 适合 每 个 单独 的 图 案 磁 
贴 ， 而 不 是 整体 的 边界 盒 。 图 11-3 显示 了 缩小 每 个 图 案 磁 贴 到 盒子 宽度 的 
10%、 高 度 的 25% 时 图 案 的 样子 ， 使 用 的 是 如 下 属性 : 


<pattern id="circular-gradient" width="0.1" height="0.25" 
ViewBox="0 0 1 1"> 


图 案 内 容 中 <rect> 元 素 上 的 宽 和 高 都 没有 改变 。 

例 11-2 中 使 用 超大 背景 的 方式 并 不 理想 。 如 果 图 案 磁 贴 的 宽 高 比比 5:1 更 
极端 ， 背 景 就 不 能 填 满 整个 图 案 。 如 果 使 用 图 案 覆 盖 整 个 磁 贴 比 让 整个 图 
案 内 容 可 见 更 加 重要 ， 你 可 以 给 preserveAspectRatio 使 用 slice。 它 可 以 
保证 图 案 内 容 总 是 完全 和 覆盖 磁 贴 。 
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B 11-3: 重复 的 圆 形 渐变 图 案 


11.3 SVG 样式 的 背景 图 片 


当 使 用 slice 方式 来 保持 宽 高 比 ， 且 是 单 磁 贴 边界 盒 图 案 时 ， 它 的 效果 与 
CSS 中 设置 背景 图 片 background-size: cover 时 很 相似 。 单 个 图 形 会 填充 
整个 形状 。 


例 11-3 使 用 一 个 图 案 来 包含 一 个 阳光 和 天 空 的 SVG 图 形 ， 它 可 能 会 被 用 于 
幻灯 片 或 海报 的 背景 。slice 效果 通过 一 系列 填充 不 同 宽 高 IEE KEŞ 
来 展示 ， 结 果 如 图 11-4 所 示 。 


例 11-3 重复 使 用 一 个 SVG 图 形 来 填充 非 重复 图 形 
<svg xmLns="http://www.w3.org/2000/svg" 
width="4in" height="6.5in" viewBox="0 0 400 650"> 
<title xml: lang="en">Sliced Image Pattern</title> 
<defs> 
<linearGradient id="sky" x2="0" y2="1"> (1) 
<stop stop-color="lightSkyBlue" offset="0"/> 
<stop stop-color="deepSkyBlue" offset="1"/> 
</linearGradient> 
<radialGradient id="sunlight" cx="0" cy="0" > 
<stop stop-color="yellow" 
stop-opacity="0.9" offset="0.2"/> 
<stop stop-color="lightYellow" 
stop-opacity="0" offset="1"/> 
</radialGradient> 
<radialGradient id="cloud" fx="0.5" fy="0.15" r="0.6"> 
<stop stop-color="oldLace" offset="0.75"/> 
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<stop stop-color="lightGray" offset="0.9"/> 
<stop stop-color="darkGray" offset="1"/> 
</radialGradient> 
<pattern id="sky-pattern" width="1" height="1" 
viewBox="0 0 100 50" 
preserveAspectRatio="xMinYMin slice" > @ 
<rect width="100" height="50" fill="url(#sky)"/> 
<g fill="url(#cloud)"> 


<g> 
<circle cx="10" cy="42" r="5" /> 
<circle cx="6" cy="42" r="3" /> 
<circle cx="16" cy="43" r="3" /> 
<circle cx="14" cy="41" r="4" /> 
</g> 
<g> 
<circle cx="20" cy="22" r="7" /> 
<circle cx="50" cy="22" r="10" /> 
<circle cx="40" cy="18" r="7" /> 
<circle cx="45" cy="25" r="9" /> 
<circle cx="30" cy="25" r="12" /> 
</g> 
<g> 
<circle cx="72" cy="39" r="5" /> 
<circle cx="77" cy="40" r="3" /> 
<circle cx="83" cy="41" r="4" /> 
<circle cx="80" cy="36" r="5" /> 
<circle cx="76" cy="35" r="3" /> 
<circle cx="86" cy="39" r="3" /> 
</g> 
</g> 
<rect width="50" height="50" fill="url(#sunlight)"/> 
</pattern> 
</defs> 
<g fill="url(#sky-pattern)"> (4) 


<rect width="400" height="175" /> 
<text x="200" y="280" textLength="390" 
text-anchor="middle" font-family="sans-serif" 
font-size="124px" font-weight="bold" 
stroke-width="2" stroke="deepSkyBlue" 
>Clouds</text> 
<rect y="290" width="250" height="250" /> 
<rect x="270" y="290" 
width="130" height="250" /> 
<rect x="0" y="550" 
width="400" height="100" /> 











4 











B 11-4: 使 用 相同 的 图 形 青 景 填充 不 同 宽 高 比 的 长 方形 和 文本 
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O 该 代码 包含 了 许多 渐变 的 定义 ， 它 们 用 在 图 案 内 的 图 形 。 

O 图 案 本 身 有 一 个 通过 viewBox 定义 的 2:1 (100 x 50) 的 宽 高 比 。pattern- 
Units 和 patternContentUnits 属性 都 不 是 必需 的 : patternUnits 属性 使 
用 默认 值 ， 且 宽 和 高 都 填充 整个 边界 盒 。 再 次 说 明 ， 内 容 单位 是 不 需要 
的 ， 因 为 它们 会 被 viewBox 替换 。 最 后 通过 preserveAspectRatio 属性 设 
A slice 缩放 和 对 齐 方式 。 


O 图 案 内 容 包 括 一 个 蓝 色 渐变 填充 的 长 方形 ， 一 组 通过 渐变 填充 的 圆 来 
创建 的 云 从 ， 以 及 最 后 通过 金色 到 透明 的 径 向 渐变 形成 的 太阳 填充 的 
长 方形 。 

O <rect> 元 素 和 文本 都 是 真实 绘制 的 图 形 ， 它 们 会 从 组 元 素 上 继承 填充 
值 。 与 往常 一 样 ， 每 个 填充 层 的 边界 盒 是 基于 每 个 元 素 计 算 的 ， 而 不 是 
基于 组 。 

图 案 除 了 slice 缩放 模式 ， 还 使 用 了 xminymin 对 齐 选项 ， 所 以 图 形 的 左上 

角 始 终 包含 在 边界 盒 内 〈 虽 然 形状 本 身 不 一 定 ) ， 如 填充 文本 时 所 示 。 




















使 用 图 片 文件 填充 SVG 形状 和 文本 

在 第 6 章 曾 简单 提 到 ，SVG 2 中 将 允许 CSS 图 片 类 型 直接 作为 SVG 形状 和 
文本 的 填充 值 。 这 包括 CSS 渐变 函数 ， 也 包括 通过 URL 引用 单独 的 SVG 
或 光栅 图 片 文件 。 
例如 ， 你 可 以 使 用 复 用 的 背景 创建 一 个 单独 的 图 片 文件 ， 然 后 将 如 下 规则 
应 用 在 形状 上 : 

.slide { 

fill: url(clouds.svg); 

} 
PWARAARR TH E AWMEBLAMEAPNILALAR A, CRE 
法 和 使 用 CSS 背景 图 片 很 相似 。 





虽然 现在 还 不 能 使 用 单独 的 图 片 文 件 代替 SVG 渲染 服务 ， 但 可 以 在 演 染 服 
务 内 通过 SVG<image> 元 素 使 用 图 片 文 件 。 

i] 11-4 创建 了 一 个 包括 摄影 照片 (NASA 提供 的 地 球 的 合成 图 片 ) 的 图 案 。 
图 片 被 放大 来 填充 图 案 磁 贴 ， 多 余部 分 被 裁剪 掉 。 图 11-5 显示 了 最 终 效果 。 


























S 
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例 11-4 在 图 案 内 使 用 摄影 照片 来 填充 文本 
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xLink="http: //www.w3.org/1999/xlink" 
width="400" height="250" viewBox="0 0 800 500"> 
<title xml: lang="en">Earth in Space</title> 
<style type="text/css"> 
.earth { 
font-family: sans-serif; 
font-weight: bold; 
font-size: 148pt; 


text-anchor: middle; 
fill: url('#photoFill'); 
stroke: #205334; 
stroke-width: 3; 
text-decoration: overline underline; 
text-shadow: white 0 0 8px ; (1) 
} 
«background { 
fill: url(#background); 
} 
</style> 
<defs> 
<pattern id="photoFill" width="1" height="1" 
viewBox="0 0 1 1" 


preserveAspectRatio="xMidYMid slice"> (2) 
<image x="-0.1" y="-0.1" width="1.2" height="1.2" 
xlink:href="globe_west_1024.jpg" /> © 
</pattern> 
<linearGradient id="background" 
gradientTransform="rotate(90)"> (4) 


<stop stop-color="black" offset="0"/> 

<stop stop-color="black" offset="0.5"/> 
<stop stop-color="navy" offset="0.80"/> 
<stop stop-color="blue" offset="0.9"/> 

<stop stop-color="lightBlue" offset="0.95"/> 
<stop stop-color="green" offset="0.95"/> 
<stop stop-color="brown" offset="1.2"/> 


</linearGradient> 
</defs> 
<rect width="100%" height="100%" class="background"/> 
<text class="earth" x="400" y="60%">EARTH</text> © 
<metadata> O 
Image Source: http://visibleearth.nasa.gov/view.php?id=57723 
</metadata> 
</svg> 
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=m ChenyangGao(2339083510@qq.com) # 









O 字体 样式 和 SVG 样式 都 是 通过 CSS 类 来 设置 的 。text-shadow 在 支持 该 
属性 的 浏览 器 中 给 字母 周围 稍微 添加 了 一 些 光 臣 ， 同 时 声明 underline 
和 overline 是 为 了 添加 一 个 边框 效果 。 


@ height 和 width 属性 创建 了 一 个 适合 边界 盒 的 单个 图 案 磁 贴 。viewBox 
创建 了 一 个 正方 形 的 宽 高 比 ， 根 据 preserveAspectRatio 的 值 ， 它 将 会 
扩展 到 有 履 盖 整个 磁 贴 且 多 余 的 部 分 会 被 裁减 掉 。 


O 图 片 本 身 绘 制 得 比 viewBox 稍 大 一 些 ， 这 样 是 为 了 不 包含 地 球 周围 的 墨 
空间 。 


© -LinearGradient> 提供 了 一 个 类 似 地 平 线 的 背景 效果 。 
O 文本 被 放置 在 SVGviewBox 的 中 间 ， 它 的 尺寸 、 字 体 和 text-anchor 都 
是 通过 CSS 类 来 设置 的 。 
QO <metadata> 提供 了 该 文件 的 一 些 额 外 信息 ， 这 既 不 是 图 片 的 一 部 分 ， 也 
是 它 的 替换 文本 。 










































































图 11-5: 使 用 裁剪 的 图 案 填充 的 文本 


该 例子 演示 了 text-decoration 标记 (underlines, overlines 以 及 strike- 
throughs) 将 被 视 为 文本 内 容 的 一 部 分 ， 且 都 会 像 字 母 那 样 使 用 相同 的 样式 
填充 和 描 边 。 另 一 个 具体 的 文本 演 染 效果 是 使 用 text-shadow 来 提高 字母 周 
围 的 对 比 度 。 
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虽然 大 多 数 浏览 器 支持 给 CSS 布局 的 文本 添加 text- shadow, 
但 正 以 及 许多 其 他 基于 SVG 1.1 规范 的 工具 不 支持 给 SVG 
添加 该 效果 。 即 使 支持 的 Web 浏览 器 中 也 有 一 些 bug: 
Chrome 在 文本 被 缩放 时 不 会 缩放 它 的 阴影 ，Firefox 在 文本 
使 用 泻 染 服务 填充 文本 时 不 会 绘制 阴影 ，Safari 在 使 用 泻 染 
服务 时 ， 会 在 每 个 em-box 周围 创建 阴影 ， 而 不 是 沿 着 字母 
的 形状 创建 阴影 。 


换 句 话说 ， 只 在 不 添加 装饰 的 文本 上 使 用 text-shadow。 如 有 果 
你 要 使 用 它 ， 它 必须 使 用 CSS 来 定义 ， 而 不 能 通过 表现 属性 
定义 。 













































































例 11-4 中 使 用 的 图 片 资 源 如 图 11-6 所 示 。 它 是 一 个 正方 形 ， 宽 高 比 和 
<image> 元 素 上 的 height 和 width 属性 正好 匹配 。 如 果 不 匹 配 ， 默 认 会 缩小 
来 适合 <image>， 这 会 破坏 图 案 的 slice 效果 。 对 于 不 同 的 图 片 ， 你 可 能 需 
要 改变 图 片 元 素 的 尺寸 以 及 viewBox 的 宽 高 比 ， 这 样 图 片 才 可 以 完全 填充 。 


















































图 11-6: 用 于 填充 SVG 文本 的 图 片 (照片 来 自 美国 宇航 局 成 达 德 太空 飞行 中 
心 Reto Stockli， 由 Robert Simmon 对 效果 进行 增强 处 理 ) (http:/ 
visibleearth.nasa.gov/view.php?id=57723) 
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如 果 不 知道 要 使 用 的 图 片 的 宽 高 比 ， 你 可 以 在 <image> 元 素 
本 身上 定义 一 个 值 为 slice 的 preserveAspectRatio 属性 。 两 
个 slice 的 设置 可 能 会 裁减 掉 比 我 们 需要 的 更 多 的 内 容 ， 但 
这 也 比 显示 空白 更 加 友好 。 








你 可 以 把 例 11-4 中 的 效果 描述 为 根据 文本 裁剪 图 片 。 实 际 上 ， 你 可 以 通过 
把 文本 包含 在 <clipPath> 元 素 内 ， 然 后 在 <image> 元 素 的 clip-path 属性 中 
引用 它 来 创建 非常 相似 的 效果 (除去 描 边 和 阴影 )。 这 种 情况 下 ，<image> 
将 是 显示 在 屏幕 上 的 元 素 ， 文 本 成 为 图 形 效果 的 一 部 分 。 通 过 把 图 片 填充 
到 <text> 元 素 内 ， 文 本 可 以 保持 可 选择 和 可 访问 。 








聚焦 未 来 

泻 染 文本 修饰 
CSS Text Decoration Module Level 3 中 扩展 了 text-decoration 属性 ， 使 
它 成 为 一 系列 子 属性 的 简写 形式 。 扩 展 的 语法 不 仅 允 许 你 设置 线条 的 类 型 
(下 划 线 、 上 划 线 或 删除 线 )， 还 可 以 设置 它 的 颜色 、 样 式 ， 例如 虚线 或 波 
RR. 
这 些 新 的 选项 大 部 分 都 过 用 于 SVG， 但 颜色 选项 由 于 SVG 文本 具有 填充 和 
描 边 而 变 得 更 加 复杂 ， 它 不 是 单一 的 文本 颜色 。 最 终 ，SVG 2 中 引入 了 相 
应 的 text-decoration-fill 和 text-decoration-stroke 属性 。 
浏览 器 已 经 开始 实现 对 新 的 文本 修饰 选项 的 支持 。 然 而 ， 编 写本 书 时 ， 还 
没有 浏览 器 实现 SVG 特定 的 对 填充 和 描 边 洽 染 的 控制 。 
例 11-4 中 使 用 的 text-shadow 效果 是 在 CSS2 中 初次 提出 的 ， 但 并 没有 成 为 
最 终 的 规范 。 现 在 它 已 经 被 包含 在 CSS Text Decoration Module Level 3 草案 
中 。 编 写本 书 时 ， 它 还 没有 正式 作为 SVG 的 表现 属性 而 被 采用 。 
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第 12 章 


有 纹理 的 文本 





在 第 11 章 中 ， 我 们 已 经 展示 了 几 个 使 用 图 案 来 填充 文本 的 例子 ， 也 在 最 后 
强调 了 一 些 其 他 的 文本 样式 。 第 2 章 中 也 使 用 描 边 的 文本 来 演示 了 paint- 
order 属性 。 
从 始 至 终 我 们 一 直 都 在 强调 ， 在 SVG 中 填充 和 描 边 文本 与 填充 形状 类 似 。 
在 大 多 数 情况 下 ， 确 实 是 这 样 。 但 是 ， 对 于 泻 染 服务 ， 还 是 会 有 一 些 不 同 
的 ， 因 为 文本 是 基于 对 象 边 界 盒 来 计算 的 。 本 章 将 更 加 详细 地 讲解 泻 染 服 
务 和 文本 。 
如 果 你 正 考虑 使 用 形状 来 替换 文本 ， 那 熟悉 绘制 文本 和 绘制 形状 之 间 的 差 
异 尤 为 重要 。 大 多 数 图 形 程序 提供 了 一 个 文本 到 路 径 的 转换 ， 这 样 可 以 保 
持 文 本 在 特定 字体 中 的 视觉 效果 ， 而 不 用 担心 必须 把 字体 和 你 的 图 形 一 起 
在 Web 上 分 发 ， 也 不 用 考虑 许多 浏览 器 在 演 染 文本 时 的 bug (特别 是 在 移 
动 设备 上 )。 依 赖 于 具体 的 实现 方式 ， 这 种 转换 可 能 因为 字母 形式 的 泻 染 方 
式 不 同 而 产生 细微 的 差别 ， 也 可 能 会 有 显著 的 改变 。 

把 文本 转换 为 路 径 会 使 得 文本 对 于 屏幕 阅读 器 ， 以 及 想 要 搜 

索 、 复 制 、 翻 译文 本 内 容 的 普通 用 户 不 可 访问 。 务 必要 为 任 

何 文本 形状 提供 一 个 机 器 可 读 的 替代 品 。 
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SVG 规范 中 有 许多 控制 文本 布局 的 选项 ， 其 中 有 一 些 是 借鉴 原来 的 CSS2 
规范 ， 有 一 些 对 于 SVG 来 说 是 新 的 但 CSS3 中 早已 采纳 ， 还 有 一 些 是 SVG 
特有 的 。 有 些 选 项 已 经 在 Web ili as PSL! 讨论 所 有 的 文本 布局 选项 
本 身 就 有 一 本 书 ', 所 以 本 章 中 的 例子 除了 在 指示 该 属性 支持 比较 差 时 外 , 不 
会 讲解 太 多 布局 创建 的 具体 细节 。 


12.1 边界 文本 


SVG 中 绘制 在 屏幕 上 的 每 个 元 素 都 有 一 个 边界 盒 。 虽 然 有 些 元 素 并 不 会 绘 
制 ， 组 元 素 以 及 其 他 容器 元 素 比 如 <use> 和 <svg> 同样 也 有 边界 盒 ， 这 些 容 
器 的 边界 合用 于 裁剪 、 庶 办 以 及 滤 镜 。 边 界 盒 始终 是 与 该 元 素 (包括 任何 
变换 ) 坐标 系 的 轴线 对 齐 的 矩形 。 


对 于 形状 ， 盒 子 始终 是 控制 形状 基本 几何 的 最 小 矩形 。 对 于 容器 ， 它 是 包 
含 所 有 子 组 件 的 最 小 矩形 。 对 于 文本 ， 它 是 包含 每 个 字符 的 en 盒子 的 最 小 
和 矩形。 


排版 中 的 en 盒子 是 每 个 字符 绘制 的 区 域 。 字 体 通 常 占 据 整 个 em 盒子 的 高 ， 
以 及 整个 字母 间距 确定 的 宽 。 在 许多 情况 下 ， 实 际 的 字符 只 占据 算 形 的 一 
小 部 分 。 对 于 其 他 字符 ， 字 母 可 能 延伸 到 矩形 外 ， 低 于 或 高 于 文本 中 同一 
行 的 其 他 字符 。 最 终 ， 你 填充 的 文本 区 域 可 能 并 没有 匹配 用 于 缩放 泻 染 服 
务 的 对 象 边界 盒 。 


例 12-1 定义 了 一 个 简单 的 条 纹 图 案 ， 缩放 到 对 象 边 界 盒 ， 且 使 用 它 填充 四 
个 不 同 的 文本 元 素 。 每 个 元 素 占据 绘制 图 形 的 不 同 空间 。 图 12-1 显示 了 它 
们 是 如 何 绘制 的 。 


例 12-1 使 用 对 象 边界 盒 图 和 案 填 充 文本 
<svg xmlns="http://www.w3.org/2000/svg" 
xmLns:xLink="http: //www.w3.org/1999/xlLink" 
width="400px" height="300px" viewBox="0 0 400 300" 
xmL: Lang="en"> 
<title>Text Bounding Box</title> 
<style type="text/css"> 
text { 
font-size: 50px; 
font-family: sans-serif; 
font-weight: bold; 
} 
</style> 






























































HE 1: 具体 来 说 是 SVG Text Layout， 作 者 及 出 版 社 与 本 书 完全 的 一 样 。 
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<pattern id="stripes" width="100%" height="20%" 
patternContentUnits="objectBoundingBox"> (1) 
<rect width="1" height="0.1" fill="indigo" /> 
<rect width="1" height="0.1" y="0.1" 


fill="royalBlue" /> ð 
</pattern> 
<defs> 
<path id="p" d="M250,150 L350,200 250,270" /> 
</defs> 
<g fill="url(#stripes)"> © 


<text x="50%" y="1em" dx="-10" 
text-anchor="end">Mixing</text> 
<text x="50%" y="1em" dx="10" 
text-anchor="start">BLOCK</text> (4) 
<text x="10%" y="3em" 
>Three <tspan x="10%" dy="1.2em" 
>line </tspan><tspan x="10%" dy="1.2em" 


>text</tspan></text> 日 
<text><textPath xlink:href="#p" 
>TextPath</textPath></text> (6) 
</g> 
</svg> 





Mixing BLOCK 


Three 
line 
text wr 


图 12-1; 四 个 使 用 相同 的 条 纹 图 案 填充 的 文本 元 素 


Tex, 
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@ 每 个 图 案 磁 贴 延伸 到 边界 盒 整个 宽度 以 及 高 度 的 五 分 之 一 〈20% ) 。 

O 图 和 案 内 容 也 缩放 到 边界 盒 。 每 个 条 纹 是 边界 盒 高 度 的 十 分 之 一 〈0.1) 。 

© 组 元 素 中 应 用 图 案 来 填充 所 有 的 <text> 元 素 。 与 往常 一 样 ， 每 个 元 素 将 
基于 自己 的 边界 盒 填充 。 

O 前 两 个 元 素 水 平 对 齐 。 一 个 元 素 字母 大 小 写 混 合 ， 另 一 个 元 素 字母 全 部 
大 写 。 


O 下 一 个 元 素 使 用 定位 的 <tspan> 段 把 整个 文本 打破 使 它 跨 越 三 行 。 
O 最 后 一 个 文本 元 素 沿 着 <textPath> 排列 ， 大 约 占据 页 面 中 三 行文 本 的 


高 度 。 


图 12-1 中 要 注意 的 第 一 件 事 是 ， 条 纹 在 多 行 以 及 <textpPath> 文本 中 的 尺寸 
不 同 于 在 单行 文本 元 素 中 的 尺寸 。 这 些 元 素 的 边界 盒 更 大 ， 会 创建 更 大 的 
图 案 磁 贴 。 

如 果 仔 细 查 看 最 上 面 的 一 行 (两 个 单行 元 素 ) ， 你 会 注意 到 字母 从 上 到 下 
数 并 没有 五 对 条 纹 。 你 还 可 以 注意 到 两 个 单词 条 纹 的 尺寸 相同 ， 尽 管 实 际 
上 大 写字 母 不 会 低 于 基线 。 这 是 因为 计算 边界 盒 是 基于 每 个 字符 的 整个 em 
高 ， 即 使 使 用 的 字符 并 没有 填 满 整个 空间 。 

较 大 的 元 素 同 样 稍 小 于 它们 的 边界 盒 ， 尽 管 未 使 用 的 部 分 仅 占 据 较 大 元 素 
边界 盒 的 一 小 部 分 。 


对 于 <textPath> 以 及 其 他 旋转 字符 的 文本 元 素 ， 许 多 浏览 器 
(编写 本 书 时 ，Blink、WebKit 以 及 IE) 会 随 着 字母 旋转 整 
个 图 案 。 对 于 例 12-1， 这 将 导致 有 补丁 、 不 连续 的 条 纹 。 图 
12-1 是 在 Firefox (v37) Pie Zen. 





















































相 比 而 言 ， 如 果 你 把 文本 转换 为 路 径 ， 边 界 盒 将 是 每 个 <path> 元 素 的 最 小 
边界 盒 。 图 12-2 显示 了 使 用 Inkscape 中 把 对 象 转换 为 路 径 的 功能 的 结果 。 
每 一 个 字母 都 变 为 一 个 <path> 元 素 ， 因 此 在 形状 内 从 上 到 下 条 纹 缩放 且 排 
列 为 五 对 蓝 色 - 靛蓝 色 条 纹 。 


在 把 文本 转换 为 路 径 之 前 ， 例 12-1 中 的 SVG 代码 首先 必须 
替换 用 户 坐 标 中 所 有 百分比 长 度 和 em 单位 ， 因 为 它们 目前 
在 Inkscape (版 本 0.91) 中 都 不 支持 。 
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Mixing BLOCK 











12-2: 使 用 相同 的 条 纹 图 案 填 充 组 成 单个 字母 路 径 


要 想 让 最 终 的 外 观 与 原 效 果 更 加 接近 ， 可 以 通过 把 每 个 文本 块 内 所 有 的 
路 径 合 并 为 一 个 拥有 多 个 部 分 的 路 径 (在 Inkscape 中 ， 可 以 通过 选中 创 
建 <text> 元 素 的 组 并 使 用 合并 路 径 选 项 来 实现 )。 但 是 图 案 比 例 依 然 和 原 
<text> 有 一 些 偏差 。 文 本 的 边界 盒 扩展 到 了 字母 边界 之 外 ， 因 此 它 是 最 终 
路 径 的 边界 盒 。 

这 些 可 以 影响 你 边界 盒 图 案 缩放 的 因素 ， 将 便于 你 很 容易 地 调整 每 个 图 案 
磁 贴 的 尺寸 。 不 幸 的 是 ， 例 12-1 中 的 代码 ， 图 案 内 容 也 是 基于 对 象 边界 盒 
单位 度量 的 ， 它 直接 依赖 于 图 案 磁 贴 的 尺寸 。 

即使 你 不 需要 图 案 保 持 一 个 固定 的 宽 高 比 ， 你 也 可 以 使 用 viewBox 给 内 容 建 
立 一 个 独立 于 磁 贴 尺寸 的 完整 的 坐标 系 。preserveAspectRatio 设置 为 none 
会 使 正方 形 被 拉 伸 去 填 满 整个 磁 贴 ， 而 忽略 磁 贴 尺 寸 的 所 有 变化 。 就 像 对 
象 边界 盒 单 位 那样 ， 缺 乏 宽 高 比 控制 将 创建 一 个 扭曲 的 坐标 系 ， 但 是 对 于 
长 方形 条 纹 是 没有 问题 的 。 


正如 第 11 章 中 提 到 的 那样 ，40 版 本 之 前 的 Firefox 不 能 正确 
演 染 图 案 上 的 viewBox。 
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例 12-2 展示 了 对 于 条 纹 图 案 它 是 如 何 工 作 的 。 为 了 演示 图 案 内 容 和 图 案 磁 








贴 之 间 的 独立 性 ， 通 过 使 用 xLink:href 复制 图 案 内 容 创 建 了 两 种 不 同 的 











案 一 一 一 种 粗 条 纹 ， 一 种 细 条 纹 。 图 12-3 显示 了 两 个 版 本 的 图 案 。 
例 12-2 不 保持 宽 高 比 ， 使 用 viewBox 创建 可 缩放 的 边界 盒 图 案 


<svg xmlns="http://www.w3.0rg/2000/svg" 
xmlns:xlink="http: //www.w3.0rg/1999/xlink" 
width="400px" height="70px" viewBox="0 0 400 70" 
xml: Lang="en"> 
<title>Adjustable Stripes</title> 
<style type="text/css"> 
text { 
font-size: 50px; 
font-family: sans-serif; 
font-weight: bold; 














} 
</style> 
<pattern id="thick-stripes" width="100%" height="40%" 
viewBox="0 0 2 2" preserveAspectRatio="none"> 
<rect width="2" height="1" fill="indigo" /> 
<rect width="2" height="1" y="1" 
fill="royalBlue" /> 
</pattern> 
<pattern id="thin-stripes" height="12.5%" 
xLink:href="#thick-stripes" /> 
<text x="50%" y="1em" dx="-10" fill="url(#thick-stripes)" 
text-anchor="end">Stripy</text> 
<text x="50%" y="1em" dx="10" fill="url(#thin-stripes)" 
text-anchor="start">Stripy</text> 
</svg> 


医 

















Stripy Stripy 








12-3: 使 用 不 同 尺寸 条 纹 图 案 填充 的 文本 元 素 


图 案 中 的 每 个 长 方形 占据 viewBox 高 度 的 一 半 以 及 整个 宽度 。 边 界 盒 高 度 范 
围 之 内 水 平 条 纹 的 数量 因此 只 由 图 案 上 的 height 属性 控制 ， 且 很 容易 在 引 





用 第 一 个 图 案 的 第 二 个 <pattern> cs LTE. 











12.2 中途 切换 样式 





虽然 例 12-1 中 的 每 个 <text> 元 素 都 会 创建 自己 绘制 时 的 对 象 边界 盒 ， 但 多 
行文 本 中 的 单个 <tspan> 元 素 不 会 。 也 就 是 说 单个 <tspan> 元 素 可 以 设置 与 








剩余 文本 不 同 的 填充 值 。 











个 <text> 元 素来 缩放 的 ， 而 不 是 它 本 身 。 








如 果 <tspan> 的 填充 使 用 的 是 对 象 边界 盒 缩 放 ， 它 是 基于 整 


例 12-3 演示 了 这 种 使 用 边界 盒 渐 变 来 填充 <text> 元 素 中 三 个 单独 的 
<tspan> 元 素 的 效果 。 它 还 提供 了 一 个 可 读 性 稍 强 的 、 使 用 图 案 来 填充 文本 








的 例子 。 它 没有 使 用 粗 条 纹 来 填充 ， 而 是 使 用 一 个 更 加 精细 的 纹理 








DREJ 








创建 粉笔 写 在 黑板 上 的 效果 。 图 12-4 显示 了 最 终 效果 。 





Text Effects 


Textured Effects 
Textured Text 














B 12-4: 图 案 和 渐变 填充 的 多 行文 本 
例 12-3 ”使 用 对 象 边界 盒 图 和 案 和 渐变 来 填充 文本 


<svg xmLns="http://www.w3.org/2000/svg" 
xmlns:xlink="http: //www.w3.0rg/1999/xlink" 
width="10cm" height="5cm" 
xml: Lang="en"> 
<title>Chalkboard Text</title> 
<style> 
text { 
font-family: cursive; 
font-weight: bold; 
font-size: 9mm; 
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font-size-adjust: 0.54; 0 


} 
.chalk { 

fill: url(#chalk-texture); 
} 


.chalk-marks { 

fill: white; 

fill-opacity: 0.8; 

stroke: silver; 

stroke-width: 0.2px; 
.highlight { 

fill: url(#highlight-gradient); 
} 
.blackboard { 

fill: black; 
} 

</style> 
<pattern id="chalk1" class="chalk-marks" 
patternUnits="userSpaceOnUse" 

width="9" height="6"> ð 
<circle r="1" cx="0" cy="3" /> 
<circle r="1" cx="1" cy="5" /> 
<circle r="1" cx="2" cy="1" /> 
<circle r="1" cx="3" cy="2" /> 
<circle r="1" cx="4" cy="5" /> 
<circle r="1" cx="5" cy="4" /> 
<circle r="1" cx="6" cy="0" /> 
<circle r="1" cx="7" cy="6" /> 
<circle r="1" cx="8" cy="3" /> 


</pattern> 
<pattern id="chalk2" xlink:href="#chalk1" 
x="2" width="5" height="5"/> © 


<pattern id="chalk3" xlink:href="#chalk1" 
y="4" width="7" height="7"/> 
<pattern id="chalk-texture" patternUnits="userSpaceOnUse" 
width="315" height="210"> (4) 
<rect fill="url(#chalk1)" width="315" height="210"/> 
<rect fill="url(#chalk2)" width="315" height="210"/> 
<rect fill="url(#chalk3)" width="315" height="210"/> 
</pattern> 


<linearGradient id="highlight-gradient" x2="0" y2="1"> 





<stop stop-color="gold" offset="0.3" /> (5) 
<stop stop-color="deeppink" offset="0.7" /> 
</linearGradient> 
<rect class="blackboard" width="100%" height="100%" /> 
<text y="5mm" class="chalk" textLength="29cm"> O 
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<tspan x="3mm" dy="1em"><tspan 
class="highlight">Textured</tspan> (7) 
Text Effects</tspan> 
<tspan x="3mm" dy="1.6em">Textured 
<tspan class="highlight">Text</tspan> Effects</tspan> 
<tspan x="3mm" dy="1.6em">Textured 
Text <tspan class="highlight">Effects</tspan></tspan> 
</text> 
</svg> 
@ 你 不 必 使 用 px 或 pt 来 设置 文本 的 大 小 : SVG 所 会 缩放 到 使 用 合适 的 度 
量 单位 ， 文 本 也 是 如 此 。font-size-adjust 的 设置 是 为 了 保证 无 论 实际 
使 用 什么 字体 ， 字 体 的 大 小 可 以 保持 大 致 相同 。0.54 的 值 是 基于 Comic 
Sans MS HY, ‘Exe Windows 计算 机 上 大 多 数 浏 览 器 默认 的 cursive 字体 。 


O 基础 的 粉笔 图 案 是 通过 一 小 块 图 案 磁 贴 内 九 个 位 置 不 规律 的 白色 和 灰色 
点 来 创建 的 。 圆 的 样式 是 在 <pattern> 上 的 chalk-marks 类 中 设置 的 。 


O 为 了 使 图 案 更 加 紧密 、 更 加 不 规则 ， 它 被 复制 了 两 次 ， 但 每 个 图 案 磁 贴 
的 尺寸 和 偏 移 都 不 一 样 。 


O 聚合 的 图 案 是 通过 把 三 个 粉笔 标记 图 案 放 在 一 起 布局 来 创建 的 。 聚 合 的 
图 案 使 用 userSpace0nuse 单位 来 定义 一 个 更 大 的 图 案 磁 贴 ， 这 使 它 足够 
容纳 重复 偶数 次 的 各 层 图 案 。 


© 用 于 高 亮 tspan 的 渐变 是 一 个 简单 的 缩放 到 对 象 边界 盒 (gradientUnits 
默认 值 ) 的 垂直 线性 渐变 。 约 前 三 分 之 一 是 纯 金 色 (0.3 的 偏 移 ) ， 后 三 
分 之 一 ( 偏 移 大 于 0.7) 是 纯 粉 色 ， 且 在 两 者 之 间 有 一 个 过 渡 。 


O 文本 在 一 个 <text> 元 素 内 。textLength 属性 用 于 调节 三 行文 本 的 总 长 度 
使 其 略 小 于 三 倍 SVG 的 宽度 。 


O 三 个 <tspan> 元 素 使 文本 折 为 三 行 。 每 一 行 中 ， 有 highlight 类 的 <tspan> 
使 包含 在 其 中 的 单词 使 用 不 同 的 填充 。 


图 12-4 内 渐变 填充 的 单词 非常 明显 地 展示 了 整个 <text> 元 素 作 为 边界 盒 时 
是 什么 样 的 。 而 且 ， 在 粉笔 纹理 中 这 同样 很 明显 。 如 果 每 一 行 的 文本 分 别 
在 一 个 元 素 内 ， 使 用 相同 的 图 案 填 充 时 ， 填 充 中 的 裂缝 和 不 规则 的 点 将 在 
完全 相同 的 位 置 。 本 例子 中 由 于 每 个 组 成 它 的 图 案 都 是 基于 其 自己 的 大 小 
来 重复 的 ， 且 恰好 没有 完全 匹配 一 行文 本 的 高 度 ， 所 以 结果 看 起 来 是 随机 
的 ， 如 图 12-5 所 示 ， 图 中 放大 显示 了 前 两 行 中 的 最 后 一 个 单词 。 
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812-5: 伪 随 机 纹理 图 案 的 特写 视角 


例 12-3 使 用 浏览 器 默认 的 cursive 字体 。 通 常情 况 下 ， 这 种 做 法 并 不 推荐 ， 
因为 这 些 字体 在 不 同 浏 览 器 和 操作 系统 之 间 可 能 会 发 生 很 大 变化 。 通 常 做 法 
是 给 定 一 个 font-family 名 字 列 表 ， 或 者 使 用 Web 字体 来 确保 正确 的 字体 是 
可 用 的 。 然 而 ， 有 时 这 些 方法 都 不 起 作用 ， 所 以 倡导 浑 染 一 致 性 的 其 他 代码 
属性 也 值得 我 们 去 关注 , 比如 textLength 属性 和 font-size-adjust 样式 。 


textLength 属性 (把 文本 压缩 或 拉 伸 到 给 定 的 长 度 ) 在 浏览 
器 中 有 很 多 bug， 且 在 所 有 旧版 本 的 SVG 工具 中 都 不 支持 。 
这 里 使 用 它 的 方式 (在 父 级 <text> 元 素 上 定义 ) 在 Firefox 
和 正中 支持 。 换 名 话说，Blink 和 WebKit 浏览 器 不 会 调整 
<tspan> 中 的 内 容 ， 除 非 textLength 属性 设置 在 每 个 子 元 素 
E. Firefox 会 忽略 <tspan> 上 的 textLength, IE Æ KE 
调整 时 不 能 正确 居中 或 两 端 对 齐 文本 。 

font-size-adjust 属性 ， 用 于 使 浏览 器 保持 字体 的 ex-height 
而 不 是 em-height (通过 指定 两 者 之 间 的 比率 )， 目 前 只 有 
Firefox 浏览 器 支持 。 
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在 符合 标准 的 浏览 器 中 ， 这 些 设置 可 以 确保 即使 使 用 的 字体 完全 不 同 ， 也 


























可 以 保持 整体 的 布局 ， 如 图 12-6 所 示 。 在 其 他 浏览 器 中 ， 文 本 可 能 会 没有 


“ a 
Test Effects 

F ve 
Jextared la fects 








填充 整个 宽度 ， 或 距离 边缘 大 近 。 





Testared fest 














图 12-6: 不 同 字体 中 ， 图 案 和 渐变 填充 的 多 行文 本 


CSS 与 SVG 
使 用 图 形 填充 文本 
例 11-4 中 图 片 填充 的 文本 和 例 12-3 中 的 有 纹理 的 文本 对 于 标题 或 其 他 大 
型 文本 有 很 好 的 效果 。 为 了 在 非 SVG 文本 中 实现 该 效果 ， 基 于 WebKit 的 
浏览 器 (包括 Safari, Chrome 以 及 新 版 本 的 Opera) 都 支持 不 标准 的 属性 
-webkit-background-clip， 因 此 可 以 用 它 来 创建 类 似 的 效果 。 


标准 的 background-clip 属 性 允许 把 背景 裁剪 到 元 素 的 content-box、 
padding-box 或 border-box。 试 验 阶段 的 WebKit 选项 还 支持 把 背景 裁剪 到 
元 素 的 文本 内 容 。 结 合 透明 文本 〈 使 用 WebKit 特定 的 webkit-text-fill- 
color 设置 ， 所 以 对 其 他 浏览 器 没有 影响 ) 可 以 创建 图 片 填充 的 文本 。 


编写 本 书 时 ， 还 没有 现成 的 或 处 于 草案 阶段 的 Web 标准 来 给 SVG 之 外 的 
文本 填充 图 片 或 图 案 。 然 而 ， 过 去 一 直 在 反复 讨论 对 CSS 样式 的 文本 使 用 
fill 和 stroke。 这 也 可 能 通过 元 素 及 背景 图 片 的 混合 和 合成 新 选项 来 实现 
相似 的 效果 。 
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第 13 章 
绘制 线条 








之 前 渐变 和 图 和 案 的 例子 几乎 都 是 使 用 fitl 属性 来 把 它 绘制 到 形状 上 的 。 其 
实 我 们 本 书 中 提 到 的 渲染 服务 同样 可 以 用 于 stroke 属性 。 

在 描 边 上 使 用 泻 染 服务 会 造成 一 些 新 的 难题 ， 这 就 是 我 们 把 绘制 线条 单独 
作为 一 章 的 原因 。 这 里 主要 介绍 难点 ， 也 会 给 出 一 些 通过 泻 染 描 边 来 创建 
的 独特 效果 的 例子 。 我 们 还 会 介绍 在 SVG 2 中 提出 的 一 些 新 特性 ， 这 些 特 
性 让 线条 绘制 更 简单 。 


13.1 超出 边缘 的 部 分 


我 们 之 前 简要 的 提 过 ， 描 边 不 一 定 只 能 使 用 纯色 。 和 Fill 属性 一 样 ， 
stroke 属性 可 以 使 用 一 个 url() 函数 来 通过 演 染 服务 (渐变 或 图 案 ) 的 id 
值 来 引用 它 。 你 也 可 以 使 用 一 个 备用 的 颜色 ， 以 防 泻 染 服务 出 现 问题 ， 而 
且 很 快 你 就 能 看 到 这 种 备用 颜色 的 用 武之 地 。 

在 要 使 用 泻 染 服 务 时 ， 你 可 能 会 想起 描 边 是 一 个 次 要 形状 ， 依 赖 于 定义 它 
的 元 素 ， 而 不 是 用 钢笔 或 刷子 画 的 线 。 目 前 图 和 案 和 新 变 还 不 能 沿 着 路 径 绘 
制 。 与 绘制 形状 的 填充 类 似 ， 描 边 是 从 类 似 墙 纸 的 渲染 服务 内 容 中 裁剪 出 
来 的 。 

在 描 边 中 使 用 渲染 服务 时 ， 有 两 个 地 方 让 设计 者 感到 头疼 : 


。 演 染 服务 使 用 的 objectBoundingBox 单位 不 包括 描 边 区 域 
。 所 有 的 演 染 服务 都 会 创建 一 个 不 受 形状 或 描 边 方向 影响 的 矩形 绘制 区 域 
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这 些 难 题 并 非 总 是 令 人 费解 的 。 对 于 许多 形状 ， 渐 变 或 图 案 描 边 都 能 工作 
得 很 好 。 例 13-1 使 用 第 6 章 中 基本 的 水 平 红 蓝 渐变 来 绘制 一 个 描 边 很 宽 的 
矩形， 如 图 13-1 Aras. 


il 13-1 在 和 矩形 中 使 用 渐变 来 绘制 描 边 
<svg xmlns="http://www.w3.org/2000/svg" 
width="4in" height="1.5in" > 
<title xml: lang="en">Gradient on a Stroke</title> 
<linearGradient id="red-blue" > 
<stop stop-color="red" offset="0"/> 
<stop stop-color="LightSkyBlue" offset="1"/> 
</linearGradient> 
<rect width="80%" height="50%" x="10%" y="25%" 
stroke-width="20%" stroke="url(#red-blue)" 
fill="none" /> 
</svg> 

















13-1; (EPR HEMT SEHD BI ABTS 


渐变 矢量 的 长 短 是 根据 长 方形 的 几何 尺寸 确定 的 ， 而 不 是 描 边 的 尺寸 ， 但 
是 这 种 渐变 平滑 的 比较 难以 判断 。 如 果 将 spreadMethod 的 值 更 改 为 repeat, 
这 就 会 变 得 很 明显 ， 如 图 13-2 所 示 。 每 条 边 上 描 边 的 一 半 是 在 渐变 矢量 外 
部 ， 而 在 重复 的 区 域内 。 

















13-2: 使 用 重复 线性 渐变 描 边 的 长 方形 
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聚焦 未 来 

多 个 描 边 
我 们 已 经 介绍 了 SVG 中 如 何 层 登 多 个 填充 ， 如 何 创 建 多 个 堆 登 的 渐变 或 图 
案 来 突出 单独 设置 的 纯色 。 描 边 中 也 将 实现 同样 的 功能 甚至 会 有 更 多 功能 。 
因为 每 个 描 边 可 能 会 有 不 同 的 宽度 或 线条 图 案 ， 其 至 纯色 描 边 也 可 以 有 效 
地 分 层 。 


确切 的 细节 在 编写 本 书 时 还 没有 最 终 敲 定 ， 但 是 SVG 2 很 可 能 会 采用 类 似 
于 CSS 分 层 背 景 的 语法 。 不 管 任何 属性 都 将 指定 为 一 个 值 列 表 ， 如 果 一 个 
属性 的 列表 长 度 和 主 (stroke) 属性 不 同 ， 它 将 会 根据 需要 进行 重复 。 所 
以 ， 如 果 想 要 所 有 层 都 有 OS 的 不 透明 度 ， 你 只 需要 指定 该 值 一 次 。 


与 填充 类 似 ， 描 边 的 另 一 种 新 内 容 是 将 支持 直接 在 stroke 属性 内 使 用 CSS 
图 片 数据 类 型 一 一 渐变 函数 以 及 引用 其 他 图 片 文件 。 和 SVG 渐变 一 样 ， 最 
终 描 边 区 域 是 从 渐变 填充 的 矩形 中 裁剪 ， 而 不 是 从 沿 着 描 边 方向 的 渐变 上 
裁剪 。 


13-2 中 锐利 的 重复 边缘 并 不 是 偶然 的 。 因 此 你 可 能 会 认为 object BoundingBox 
单位 并 不 是 一 个 很 大 的 障碍 。 确 实 如 此 ， 除 非 你 是 给 线条 而 非 形 状 描 边 。 


13.2 ZF 


例 13-2 使 用 相同 的 红 蓝 线 性 渐变 给 一 系列 不 同方 向 的 直线 描 边 。 因 为 直线 
不 能 被 填充 ， 通 常 使 用 一 条 粗 的 渐变 描 边 来 实现 我 们 想 要 的 效果 。 


例 13-2 在 直线 上 使 用 渐变 来 绘制 描 边 
<svg xmlns="http://www.w3.org/2000/svg" 
width="4in" height="3in" > 
<title xml: lang="en">Gradient on Straight Lines</title> 
<linearGradient id="red-blue" > 
<stop stop-color="red" offset="0"/> 
<stop stop-color="lLightSkyBlue" offset="1"/> 
</linearGradient> 
<g fill="none" stroke-width="0.5in" 
stroke="url(#red-blue) purple" > 
<line x1="10%" x2="90%" y1="10%" y2="10%" /> (2) 
<line x1="90%" x2="90%" y1="25%" y2="75%" /> 
<line x1="90%" x2="10%" y1="90%" y2="90%" /> 
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<line x1="10%" x2="10%" y1="75%" y2="25%" /> 
<line x1="30%" x2="70%" y1="25%" y2="75%" /> © 
<line x1="70%" x2="30%" y1="25%" y2="75%" /> 
</g> 
</svg> 








@ 样式 属性 通过 表现 属性 应 用 在 包含 每 条 线 的 组 元 素 上 。 描 边 值 包括 一 个 
对 新 变 和 备用 的 纯色 的 引用 。 


O 最 初 的 四 条 线 括 起 绘制 区 域 ， 横 穿 过 顶部 ， 然 后 沿 着 右边 向 下 ， 然 后 沿 
着 底部 水 平 返 回 ， 最 后 沿 着 左边 向 上 。 


O 最 后 两 条 是 对 角 线 ， 一 条 从 左上 到 右 下 ， 男 一 条 从 右上 到 左下 。 
代码 看 似 简 单 ， 但 如 图 13-3 所 示 ， 结 果 并 不 是 我 们 期 望 的 。 








图 13-3: 使 用 线性 渐变 或 备用 的 颜色 描 边 的 线 











为 什么 这 么 多 线 是 纯 紫 色 描 边 呢 ? 这 是 因为 完全 水 平 或 垂直 的 线 没有 边界 
盒 区 域 。 没 有 边界 盒 区 域 就 意味 着 没有 边界 盒 渐变 。 如 果 我 们 没有 指定 备 
用 的 颜色 ， 描 边 将 一 直 都 不 可 见 。 


直觉 上 这 似乎 是 渐变 的 极端 情况 。 毕 竞 ， 即 使 水 平 线 没 有 任何 高 度 ， 但 是 
它 有 宽度 。 那 不 正好 是 水 平 线性 渐变 吗 ?对 于 生 直 线 ， 不 应 该 至 少 一 边 使 
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图 灵 社 区 会 员 ChenyangGao(2339083510@qq.com) $5 





用 红色 填补 ， 另 一 边 使 用 蓝 色 填补 吗 ? 


难点 的 来 产 是 浑 染 服务 的 实现 方式 ， 因 为 浑 染 的 矩形 块 被 变换 到 适应 边界 
盒 。 变 换 导 致 任何 维度 都 替 塌 为 0， 这 造成 浏览 器 内 部 数学 计算 时 产生 除数 
为 零 的 错误 。 为 了 避免 这 个 问题 ，SVG 规范 中 把 零 宽 度 或 零 高 度 的 边界 盒 
当 作 边界 盒 泻 染 服务 的 一 种 错误 。 浏 览 器 会 使 用 相同 的 方式 响应 错误 ， 如 
果 找 不 到 泻 染 服务 ， 就 使 用 备用 的 颜色 。 


相 比 之 下 ， 对 角 线 是 使 用 渐变 绘制 的 ， 即 使 线条 依然 没有 填充 区 域 ， 因 为 
边界 盒 是 与 坐标 系 轴线 对 齐 、 可 以 包含 对 象 的 最 小 矩形 。 对 于 有 角度 的 线 ， 
它 就 是 矩形 的 对 角 线 。 虽 然 两 条 对 角 线 绘制 的 方向 相反 ， 但 它们 有 相同 的 
边界 盒 ， 所 以 两 者 之 间 的 渐变 是 一 致 的 。 


当 人 们 思考 线条 上 的 渐变 时 ， 他 们 通常 想到 的 是 像 图 13-4 中 显示 的 那样 。 
每 个 渐变 从 线 的 一 端 到 男 一 端 ， 方 向 和 线条 绘制 的 方向 一 致 。 











13-4; 使 用 方向 匹配 的 线性 渐变 来 描 边 的 线条 
你 可 能 已 经 猜 到 了 ，SVG 可 以 创建 图 13-4 的 效果 。 然 而 ， 它 需要 比例 
13-2 中 更 多 的 标记 。 你 不 能 给 渐变 使 用 对 象 边界 盒 单 位 ， 所 以 需要 使 用 


userSpaceOnUse 渐变 。 然 后 需要 让 渐变 矢量 与 线条 的 位 置 、 方 向 以 及 长 短 
都 一 一 匹配 。 
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有 两 种 可 以 实现 的 方式 。 例 13-3 中 显示 了 图 13-4 使 用 的 代码 。 它 给 每 个 
<Line> 都 创建 了 一 个 单独 的 <LinearGradient>， 并 设置 渐变 矢量 的 位 置 属 
性 与 对 应 的 线 相 同 。 


例 13-3 ”匹配 线性 浙 变 和 直线 
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xLink="http: //www.w3.org/1999/xlink" 
width="4in" height="3in" > 
<title xml:lang="en">Gradients Made to Measure 
for Straight Lines</title> 
<LinearGradient id="red-blue" 
gradientUnits="userSpaceOnUse"> (1) 
<stop stop-color="red" offset="0"/> 
<stop stop-color="LightSkyBlue" offset="1"/> 
</linearGradient> 
<g fill="none" stroke-width="0.5in" > ð 
<linearGradient xlink:href="#red-blue" id="g1" 
x1="10%" x2="90%" y1="10%" y2="10%" /> 
<line x1="10%" x2="90%" y1="10%" y2="10%" 
stroke="url(#g1) purple"/> (4) 
<linearGradient xlink:href="#red-blue" id="g2" 
x1="90%" x2="90%" y1="25%" y2="75%" /> 
<Line x1="90%" x2="90%" y1="25%" y2="75%" 
stroke="url(#g2) purple"/> 
<linearGradient xlink:href="#red-blue" id="g3" 
x1="90%" x2="10%" y1="90%" y2="90%" /> 
<line x1="90%" x2="10%" y1="90%" y2="90%" 
stroke="url(#g3) purple"/> 
<linearGradient xlink:href="#red-blue" id="g4" 
x1="10%" x2="10%" y1="75%" y2="25%" /> 
<line x1="10%" x2="10%" y1="75%" y2="25%" 
stroke="url(#g4) purple"/> 
<linearGradient xlink:href="#red-blue" id="g5" 
x1="30%" x2="70%" y1="25%" y2="75%" /> 
<line x1="30%" x2="70%" y1="25%" y2="75%" 
stroke="url(#g5) purple"/> 
<linearGradient xlink:href="#red-blue" id="g6" 
x1="70%" x2="30%" y1="25%" y2="75%" /> 
<line x1="70%" x2="30%" y1="25%" y2="75%" 
stroke="url(#g6) purple"/> 





© 


</g> 
</svg> 
@ 2 HW He EE A EE Ao gradientUnits 的 值 设 为 user- 
SpaceOnUse， 它 将 会 被 引用 它 的 渐变 继承 。 
O 不 必 在 组 元 素 上 设置 stroke 的 值 ， 每 个 元 素 都 需要 一 个 单独 的 描 边 属性 
来 引用 定制 的 渐变 。 
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© 4% <linearGradient> ILR Ah A — 15 | Fe PR xLink: href 属性 、 
一 个 唯一 的 id 以 及 与 对 应 的 <line> 相 匹 配 的 x1, x2. y1, y2 等 属性 。 
O 每 条 线 都 有 一 个 通过 表现 属性 设置 的 正确 的 描 边 渐变 。 备 用 的 颜色 是 为 
了 以 防 万 一 ， 但 不 会 被 使 用 ， 除 非 我 们 产生 了 错误 。 
例 13-3 中 代码 的 主要 不 足 之 处 是 有 太 多 重复 。 例 如 ，<Line> 和 <linear- 
Gradient> 上 重复 的 属性 在 你 想 要 改变 它 的 位 置 时 都 要 更 新 两 次 。 但 如 果 你 
第 一 时 间 就 使 用 基于 数据 的 脚本 来 生成 线条 ， 这 种 结构 是 相当 有 效 的 。 你 
可 以 创建 一 个 把 数据 设置 为 元 素 上 各 种 属性 的 函数 ， 然 后 运行 两 次 ， 一 次 
用 在 线 上 ， 一 次 用 在 渐变 上 。 


如 果 你 的 <Line> 元 素 部 分 位 置 属性 使 用 的 是 默认 值 ， 一 定 要 
记 住 <LinearGradient> 上 x2 的 默认 值 与 之 不 同 (100%， 而 
不 是 0)。 














例 13-3 中 所 用 方法 的 另 一 个 限制 是 DOM 元 素 的 数量 明显 增加 了 。 如 果 动 
态 图 形 中 有 大 量 的 线条 和 渐变 ， 网 页 会 变 得 很 慢 。 


调整 渐变 和 线 的 男 一 种 方式 是 使 用 单个 渐变 ， 然 后 让 所 有 的 线 都 沿 着 它 绘 
制 。 然 后 ， 使 用 变换 来 把 它们 调整 到 合适 的 尺寸 和 位 置 。 例 13-4 中 我 们 使 
用 了 这 种 方式 。 由 于 SVG 1.1 中 变换 必须 使 用 用 户 单位 定义 ， 不 能 使 用 百 
分 比 ， 绘 制 区 域 必须 重新 使 用 viewBox 定义 并 调整 数值 。 结 果 ， 如 图 13-5 
所 示 的 最 终 SVG 并 没有 和 图 13-4 完全 匹配 ， 但 是 非常 接近 。 


例 13-4 ”变换 线条 的 绘制 来 匹配 线性 渐变 
<svg xmlns="http://www.w3.0rg/2000/svg" xml:lang="en" 
width="4in" height="3in" viewBox="0 0 100 75"> (1) 
<title xml: lang="en">Userspace Gradient on 
Transformed Straight Lines</title> 
<linearGradient id="red-blue" gradientUnits="userSpaceOnUse"> @ 
<stop stop-color="red" offset="0"/> 
<stop stop-color="lightSkyBlue" offset="1"/> 





























</linearGradient> 
<g fill="none" stroke-width="12" 
stroke="url(#red-blue) purple" > © 
<Line x2="100%" 
transform="translate(10,7.5) scale(0.8,1)" /> @ 


<Line x2="100%" 
transform="translate(90,18.75) 
rotate(90) scale(0.375,1)" /> (5) 
<line x2="100%" 
transform="translate(90,67.5) scale(-0.8,1)" /> O 
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<line x2="100%" 
transform="translate(10,56.25) 
rotate(-90) scale(0.375,1)" /> 
<line x2="100%" 
transform="transLlate(30,18.75) 
rotate(45) scale(@.5315,1)" /> 
<line x2="100%" 
transform="translate(70,18.75) 
rotate(135) scale(@.5315,1)" /> 

















13-5: 使 用 渐变 给 线 描 边 ， 并 把 它 变换 到 合适 的 位 置 
@ viewBox 使 用 100 个 单位 的 宽度 ， 所 以 水 平 上 的 百分比 可 以 直接 转换 为 
用 户 单位 值 。 但 垂直 百分比 需要 缩放 到 70 个 单位 高 度 。 


O 我 们 只 需要 一 个 使 用 userSpaceOnUse 单位 的 渐变 。 渐 变 矢 量 使 用 默认 的 
排列 方向 : 水 平 从 0 到 100%, 


© 单独 的 一 个 stroke 值 设置 在 包含 所 有 线 的 组 元 素 上 。 同 样 ， 备 用 颜色 是 
以 备 不 时 之 需 。 用 户 空间 渐变 应 该 始终 提供 有 效 的 结果 。 
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© 每 个 <line> 元 素 都 有 相同 的 位 置 属 性 : x2="100%" 用 于 匹配 <linear- 
Gradient> 上 的 默认 属性 。 线 条 的 实际 尺寸 和 位 置 是 通过 <transform> 属 
性 控制 的 。 

O 变换 按照 一 个 特定 的 顺序 排列 ， 以 确保 它们 不 会 以 不 可 预见 的 方式 互相 
影响 : 首先 ， 原点 ( 线 的 起 点 ) 被 移动 到 一 个 合适 的 位 置 ， 然 后 把 它 旋 
转 到 正确 的 方向 ， 最 后 缩放 它 的 长 度 (x 轴 是 在 变换 后 的 坐标 系 中 )。 

O 为 了 禁 换 180 度 的 旋转 ， 右 到 左 的 渐变 使 用 一 个 负 的 缩放 值 来 创建 。 

通过 这 种 方式 ， 你 不 需要 创建 任何 额外 的 元 素 。 但 你 必须 完全 重新 定义 图 

形 的 几何 形状 。 如 果 你 事先 知道 渐变 是 图 形 必 不 可 少 的 部 分 ， 并 且 可 以 提 

前 规划 好 ， 这 可 能 并 不 是 一 个 很 大 的 障碍 。 但 像 这 样 重 写 一 个 图 形 使 

用 变换 来 替换 通过 位 置 属性 定义 的 代码 一 一 通常 带 来 的 麻烦 多 于 好 人 处。 



































聚焦 未 来 

创建 一 个 描 边 边界 盒 
正如 你 现在 知道 的 ， 给 描 边 使 用 渔业 服务 的 一 个 最 大 的 限制 是 对 象 边 界 使 
不 包含 描 边 。SVG 2 中 一 个 最 值得 期 待 的 变化 是 可 以 指定 包含 描 边 区 域 的 
KAARE. 
UREHEALARASRRAN HLH, MKAABREARMELALE 
义 。 这 将 允许 相同 的 渐变 或 图 案 可 以 恰好 适应 填充 边界 盒 、 描 边 边界 盒 、 
其 至 用 户 空间 。 但 这 些 依 然 是 “盒子 ”区 域 : 与 坐标 系 水 平和 重 直 的 轴 对 
KHER., RAELA RAZARA, MRR ERA 13-3 或 例 13-4 中 使 
用 的 方法 。 实 际 上 沿 着 线条 曲率 的 渐变 需要 SVG 当前 的 演 染 工作 进行 更 深 
层 的 改变 ， 且 短期 内 还 不 可 预期 。 
定义 渔 染 服务 所 使 用 的 盒子 的 确切 语法 在 编写 本 书 时 还 没有 最 终 敲 定 。 但 
预期 是 直接 在 stroke (或 fiLL) 的 简写 属性 中 定义 ， 或 作为 一 个 单独 的 样 
式 属性 。 


13.3 ”使 用 坐标 空间 

除了 作为 沿 着 直线 的 渐变 的 替代 品 (虽然 并 不 完美 )， 用 户 空 间 描 边 渐变 有 
着 更 多 的 应 用 。 在 数据 可 视 化 中 ， 它 们 可 以 创建 根据 值 来 改变 数据 线 外 观 
的 效果 。 例 13-5 演示 了 这 种 效果 。 它 创建 了 一 个 通用 的 状态 监控 仪表 盘 ， 
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其 中 有 一 条 线 用 于 标记 变化 值 不 应 达到 100%: 随 着 线条 距离 最 大 值 越 近 ， 
它 的 颜色 从 绿色 变 为 黄色 再 变 到 红色 。 


图 形 的 基本 框架 一 一 包括 渐变 一 一 定义 在 标记 内 ， 而 数据 是 通过 脚本 插入 
的 。 在 实践 中 ， 数 据 可 能 来 自 某 种 Web 服务 器 。 在 该 例子 中 ， 数 据 是 随机 
生成 的 。 图 13-6 显示 了 一 种 可 能 的 数据 图 案 。 


例 13-5 使 用 渐变 来 给 折线 图 添加 信息 
<svg xmlns="http://www.w3.org/2000/svg" 

width="4in" height="3in" 

xml:lang="en"> 

<title>Stroked Gradient as Status Indicator</title> 

<svg X="0.6in" y="0.5in" width="3.6in" height="2in" 
viewBox="0 0 180 100" 
style="overflow: visible; font: 10px sans-serif;"> (1) 
<linearGradient id="status" y1="100%" y2="0%" x2="0%" 











gradientUnits="userSpaceOnUse"> (2) 
<stop stop-color="limegreen" offset="0.4"/> 
<stop stop-color="yellow" offset="0.8"/> © 
<stop stop-color="red" offset="0.95"/> 
</linearGradient> 


<rect stroke="black" fill="dimGray" 
width="100%" height="100%" /> 
<g text-anchor="end" dominant-baseline="middle" 
transform="translate(-2,0)"> (4) 
<desc>Y-axis tick labels</desc> 
<text y="100">0%</text> 
<text y="80">20%</text> 
<text y="60">40%</text> 
<text y="40">60%</text> 
<text y="20">80%</text> 
<text y="0">100%</text> 
</g> 
<g text-anchor="middle"> 
<text x="50%" dy="-1em" font-size="12px" 
text-decoration="underline" 
>Status monitor</text> 
<text x="50%" y="100%" dy="1em">Time</text> 
</g> 


<polyline id="dataline" stroke="url(#status)" 
stroke-linejoin="bevel" 


stroke-width="2.5" fill="none" /> (5) 
</svg> 
<script><! [CDATA[ 
(function(){ 
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var n=19, 
dx=10, 
maxY = 100; © 


var data = new Array(n), 
points = new Array(n); 
for (var i=0; i<n; i++) { 
data[i] = [i, Math.random()]; 
points[i] = [i*dx, maxY * (1 - data[i][1])]; (7) 


var dataline = document.getElementById("dataline"); 
dataline.setAttribute("points", points.toString() ); @ 
pHo 
]]> </script> 
</svg> 





Status monitor 
100% 


80% 
60% 
40% 
20% 

0% 





Time 











13-6: 使 用 描 边 渐变 来 强调 变化 值 的 数据 图 表 


@ RAW <svg> 用 于 创建 一 个 完全 匹配 图 表 中 数据 区 域 大 小 的 用 户 空间 坐 
标 系 。viewBox 应 用 了 一 个 自 定义 坐标 系 ， 包 括 100 个 单位 的 高 ， 这 样 
可 以 很 容易 地 转换 为 百分比 值 。 

@ <linearGradient> 绘制 在 用 户 空间 坐标 系 中 ， 它 的 渐变 矢量 是 从 下 到 上 的 。 

© 渐变 的 前 40% 是 纯 绿 色 ， 然 后 逐渐 变 为 黄色 ， 再 到 红色 ，95% 之 后 是 纯 
红色 。 
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© 使 用 纯色 的 背景 填充 数据 区 域 ， 文 本 标记 偏 移 到 数据 区 域 的 外 部 
(overflow IZ EX visible). MIREU AEREN SVG 内 ， 这 样 可 
以 基于 viewBox 坐标 系 来 设 定 它们 的 位 置 ， 甚 至 可 以 打印 在 宽度 和 高 度 
区 域 之 外 。 


O 数据 线 是 一 个 <poLyLine> 元 素 。 它 的 表现 样式 (包括 渐变 的 描 边 ) 在 标 
记 中 指定 ， 但 它 没 有 points 属性 ， 所 以 直到 脚本 运行 时 它 才 会 绘制 。id 
属性 使 它 便于 在 脚本 中 访问 。 

O 脚本 内 ， 初 始 化 的 一 组 变量 用 于 控制 数据 和 坐标 系 之 间 的 比例 : n 是 
图 形 中 合适 的 数据 值 的 个 数 ，dx 是 它们 之 间 的 水 平 间 隔 (用 户 单位 )， 
maxY 是 垂直 范围 (0%~100%) 应 该 缩放 的 数值 。 

@ data 数组 包含 原始 的 数据 (在 这 里 ， 包 括 一 个 索引 值 以 及 一 个 0 到 1 之 
间 的 随机 数 )。poiints 数组 包含 这 些 数据 点 缩放 后 的 坐标 ， 使 用 控制 变 
量 来 缩放 数据 以 及 转化 > 坐标 ， 所 以 最 终 0% 在 底部 而 100% 在 顶部 。 

O points 二 维 数 组 使 用 默认 的 tostring() 方法 转换 为 一 个 喜 号 分 隔 的 字符 

串 ， 并 设置 为 折线 的 points 属性 。 

有 效 地 使 用 userSpaceOnuse 渐变 来 传递 数据 的 关键 是 精确 地 匹配 用 户 空间 

坐标 系 与 数据 区 域 。 骨 套 的 坐标 系 人 允许 viewBox 完全 匹配 数据 区 域 ， 而 且 还 

为 区 域外 的 标签 留 有 空间 。 


ÝE IE LA WebKit/Blink 浏览 器 中 ， 要 想 把 渐变 正确 地 缩放 
到 数据 区 域 ，<linearGradient> 441 KEW SVG 的 子 元 
素 。 正 如 已 经 提 到 的 ， 这 些 浏 览 器 使 用 演 染 服务 的 父 级 坐标 
系 作 为 userSpaceOnUse 而 不 是 与 之 关联 的 绘制 的 形状 的 坐 






























































用 户 空间 这 染 的 描 边 的 视觉 效果 类 似 于 一 个 连续 的 怎 形 渐变 遮 罩 在 线条 上 ， 
仅仅 显示 线条 的 区 域 。 然 而 ， 就 像 我 们 在 第 11 章 中 讨论 的 图 像 填 充 的 文本 
那样 ， 渐 变 裁剪 为 线条 和 线条 使 用 渐变 演 染 之 间 在 结构 上 有 很 大 差异 。 如 
果 你 想 在 数据 图 表 中 添加 交互 效果 ， 你 往往 希望 线条 本 身 是 交互 的 对 象 ， 
而 不 是 大 部 分 都 不 可 见 的 秆 形 区 域 。 


这 种 效果 不 一 定 非 要 限制 在 实际 的 数据 图 形 内 ， 你 可 以 使 用 一 个 纹理 图 案 
或 图 片 作 为 穿 透 描 边 区 域 露出 的 内 容 。 






































13.4 有 图案 的 线条 


图 案 描 边 和 渐变 描 边 工作 方式 基本 一 致 。 但 由 于 图 案 在 垂直 和 水 平 上 严密 
地 重复 磁 贴 ， 当 描 边 方向 和 浑 染 服务 没有 对 齐 时 会 更 加 明显 。 


与 源 变 一 致 ， 建 议 使 用 userSpaceOnuse 的 方法 来 避免 objectBoundingBox 单 
位 带 来 的 一 些 问题 。 如 果 确 认 形 状 有 一 个 有 效 的 边界 盒 〈( 即 它 不 是 垂直 或 
水 平 的 直线 ) ， 你 仍然 可 以 使 用 边界 盒 图 案 ， 但 图 案 的 缩放 是 基于 填充 区 域 
的 而 非 描 边区 域 的 缩放 。 


il 13-6 使 用 了 第 10 章 和 第 11 章 中 各 种 各 样 的 图 案 来 给 一 些 基本 的 形状 描 
边 一 一 配 有 不 同 程度 的 效果 ， 如 图 13-7 所 示 。 


例 13-6 ”使 用 狐 变 来 给 折线 图 添加 信息 
<svg xmlns="http: //www.w3.org/2000/svg" 
width="4.3in" height="4.3in" viewBox="0 0 400 400"> 
<title>Patterned Strokes</title> 
<defs> 
<!-- pattern definitions clipped --> 
</defs> 
<g style="stroke-width: 40px; fill: lightSkyBlue;" > 
<rect x="20" y="20" width="360" height="360" 
stroke="url(#pinstripe) gray" /> 
<polygon points="200,30 370,200 200,370 30,200" 
stroke="url(#scales-pattern) green"/> 
<circle cx="200" cy="200" r="90" 
stroke="url(#gradient-pattern) peachPuff"/> © 












































© © © © 


</g> 
</svg> 


O 图 案 (以 及 组 成 它 的 渐变 ) 都 是 直接 从 例 10-5、 例 10-6 和 例 11-1 中 复 
制 过 来 的 ， 所 以 这 里 没有 重复 打印 。 


O 所 有 形状 在 淡 蓝 色 的 填充 之 上 都 有 一 个 粗 的 、40px 宽 的 描 边 。 
© 长 方形 使 用 例 10-6 中 的 pinstripe 图 案 。 
O BIEN <polygon> 使 用 的 是 例 10-5 中 的 鱼鳞 图 案 。 


O 圆 形 使 用 例 11-1 中 的 分 层 布局 。 与 其 他 形状 一 样 ， 它 被 赋予 了 一 个 备用 
的 颜色 ， 以 备 不 时 之 需 。 
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13-7; 使 用 各 种 各 样 图 案 进行 描 边 的 形状 
JE, HEE AY ff Fd SE ET be ARE A SARA. pinstripes 不 一 


























定 有 你 想 要 的 效果 : 坚 条 纹 会 跨 过 正方 形 水 平方 向 的 描 边 ， 但 在 垂直 方向 
上 沿 着 描 边 紧 直 向 下 。 分 层 的 描 边 创建 了 一 个 相当 不 寻常 的 效果 ， 新 变 都 
是 使 用 边界 盒 图 案 来 编写 的 ， 因 为 边界 盒 不 会 填充 整个 描 边 区 域 ， 它 们 在 
每 条 边 上 平 铺 ， 创 建 了 颜色 锐利 变换 的 效果 。 

与 渐变 一 样 ， 我 们 也 有 解决 这 些 问题 的 办 法 。 例 如 ， 一 些 条 纹 的 描 边 效 果 
可 以 使 用 虚线 描 边 来 创建 。 为 了 避免 在 使 用 对 象 边 界 盒 图 案 描 边 时 的 平 铺 ， 
你 可 以 设置 x、y、width 和 height 属性 来 定义 一 个 足以 包括 描 边 区 域 的 图 
案 磁 贴 ( 即 x 和 y 是 负 的 值 ，width 和 height 的 值 都 大 于 100%)。 所 有 这 一 
切 都 使 多 重 描 边 和 边界 盒 描 边 在 将 来 变 得 更 加 容易 。 
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动画 








SVG 颜色 、 渐 变 和 图 案 可 以 通称 为 绘画 ， 但 是 它 与 油画 和 水 彩 画 有 一 个 非 
常 重要 的 不 同 : SVG 绘画 可 以 移动 。 


Web 浏览 器 中 的 SVG 是 动态 的 。 我 们 可 以 给 它 添加 无 限 循 环 或 响应 用 户 交 
互 的 动画 。 

动画 使 SVG 绘制 属性 和 泻 染 服务 在 某 些 方面 变 得 更 加 复杂 。 本 章 总 结 了 一 
些 主要 的 问题 以 及 与 之 对 应 的 解决 办 法 。 起 初 我 们 回顾 了 SVG 添加 动画 的 
不 同方 式 ， 并 以 动态 填充 颜色 作为 示例 。 然 后 主要 讲 了 使 用 谊 染 服务 添加 
动画 的 两 种 情况 : 给 许多 绘制 元 素 添 加 同步 的 动画 ， 或 给 单个 元 素 添加 动 
画 而 不 影响 其 他 元 素 。 

截图 来 自动 画 示例 ， 但 更 直观 的 体验 需要 在 Web 浏览 器 中 运行 代码 。 

对 SVG 动画 完整 的 讨论 可 能 需要 几 本 书 才 能 讲 完 ， 所 以 本 章 没 有 试图 描 
述 所 有 的 可 选项 和 语法 。 相 反 ， 我 们 着 重 于 颜色 和 泻 染 服务 所 特有 的 方面 。 
如 果 你 还 不 熟悉 CSS, SMIL 以 及 JavaScript 动画 ， 你 可 能 需要 查阅 其 他 资 
料 才 能 完全 理解 代码 是 如 何 创建 最 终 效 果 的 。 


14.1 动画 选项 
给 SVG 图 形 添加 动画 的 方法 有 三 种 : 
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在 标记 内 包含 动画 元 素 (<animate>、<set>、<animateTransform> 以 及 
<animateMotion>) 来 修改 其 他 元 素 ; 

。 在 图 形 的 样式 中 添加 CSS 动画 或 过 渡 属 性 ， 

。 使 用 JavaScript 依次 操作 图 形 的 样式 或 属性 。 


这 三 种 方法 至 少 都 提供 了 创建 交互 动画 的 可 能 。 动 画 元 素 可 以 由 用 户 的 
click 或 mouseover 等 事件 来 触发 或 修改 起 始 和 终止 状态 。CSS 动画 和 过 渡 
可 以 通过 交互 的 伪 类 (:hover，:focus，:active) 来 触发 。JavaScript 当然 
可 以 用 于 各 种 用 户 交 互 和 程序 。 


使 用 哪 种 方式 来 给 SVG 添加 动画 很 大 程度 上 取决 于 你 准备 如 何 使 用 SVG. 
当 SVG 作为 图 片花 入 在 其 他 网 页 中 时 ， 无 论 是 通过 <img> 标签 、CSS 背景 
图 像 还 是 其 他 相似 的 属性 来 引入 ，JavaScript 都 不 会 运行 。 此 时 ，SVG 代码 
必须 包含 在 网 页 中 或 通过 有 交互 的 <object> RRA., JavaScript 也 有 可 能 
于 安全 或 性 能 原因 而 被 用 户 有 意 禁 

假如 所 有 的 样式 都 定义 在 SVG 文件 内 ， 声 明 式 的 方法 (使 用 标记 或 CSS 属 
性 定义 的 动画 ) 在 用 于 图 像 的 SVG 中 依然 可 以 运行 。 但 动画 不 可 交互 ， 
为 用 户 事件 无 法 传递 到 SVG 文档 中 。 


目前 浏览 器 对 声明 式 动画 方法 的 支持 程度 低 于 脚本 动画 ， 即 便 对 CSS 动画 
的 支持 程度 正在 增长 。 对 于 脚本 动画 ， 许 多 浏览 器 支持 上 的 限制 可 以 通过 
额外 的 代码 来 弥补 (在 性 能 上 会 做 一 些 妥协 )， 也 有 一 些 不 同 的 代码 库 使 得 
设计 高 效 动画 更 加 容易 。 

最 终 ， 当 谈 到 动态 Fill 和 stroke， 浑 染 内 容 的 类 型 会 影响 你 对 动画 的 选 
择 。 对 于 颜色 ， 我 们 可 以 直接 通过 样式 来 修改 元 素 上 的 样式 属性 来 添加 动 
画 。 但 对 于 演 染 服务 ， 我 们 只 能 通过 修改 图 案 、 渐 变 或 结 点 元 素 上 的 样式 
和 属性 来 添加 动画 。 


本 章 中 的 例子 将 提供 相同 效果 的 多 种 编码 方式 ， 并 突出 强调 每 种 方法 的 优 

点 和 局 限 性 一 一 包括 规范 上 的 局 限 和 浏览 器 支持 上 的 局 限 。 

对 于 动画 元 素 ， 以 下 因素 应 该 会 影响 你 的 决定 。 

。 有 限 的 浏览 器 支持 ， 目 前 会 降低 我 们 的 预期 。 

。 儿 平 能 够 给 任何 样式 属性 添加 动画 (虽然 也 有 浏览 器 支持 的 限制 )。 

。 交互 是 通过 DOM 事件 来 添加 ， 进 而 控制 动画 开始 还 是 停止 。 动 画 会 一 
直 运 行 到 完全 结束 或 被 其 他 事件 终止 ,最终 的 状态 也 可 以 是 “frozen”， 
但 如 果 动 画 重新 启动 ， 它 会 立即 恢复 。 

。 对 于 交互 ,正在 执行 动画 的 元 素 以 及 接收 用 户 输入 的 元 素 可 以 完全 独立 。 
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。 动画 可 以 链 在 一 起 执行 或 通过 一 个 动画 元 素 的 开始 或 结束 事件 触发 另 一 
个 元 素来 交错 执行 。 
多 个 动画 作用 在 同一 个 元 素 上 的 相同 属性 时 ， 可 能 会 一 起 添加 〈 对 于 大 
多 数 属性 )， 也 可 能 后 添加 的 动画 替换 前 者 。 

。 定时 动画 ( 非 交 互 ) 在 SVG 用 作 图 像 时 依然 可 以 运行 。 


对 于 CSS 动画 ， 需 要 考虑 以 下 因素 。 
浏览 器 支持 的 限制 有 望 改善 。 

。 仅 受 限于 动画 样式 属性 。 
交互 限制 于 伪 类 。 如 果 伪 类 不 再 适用 时 动画 将 会 中 断 ， 虽 然 过 渡 能 够 平 
滑 地 显示 效果 。 

。 对 于 交互 ,添加 伪 类 的 元 素 必 须 能 够 影响 使 用 CSS 后 代 选 择 器 或 兄弟 选 
择 器 的 目标 元 素 。 这 在 给 泻 染 服 务 添加 动画 时 ， 会 有 很 多 问题 。 

。 链 式 动画 会 有 很 多 困难 ， 无 论 是 一 个 keyframes 序列 包含 了 所 有 动画 阶 
段 ， 还 是 多 个 动画 通过 写 死 延迟 值 来 匹配 前 一 个 动画 持续 的 时 间 。 
多 个 动画 作用 在 同一 个 元 素 上 的 相同 属性 时 ， 后 添加 的 动画 会 替换 前 者 。 

。 定时 动画 ( 非 交 互 ) 在 SVG 用 作 图 像 时 依然 可 以 运行 。 

最 后 ， 对 于 JavaScript 动画 ， 相 关 的 因素 如 下 。 


。 最 佳 的 浏览 器 支持 ， 尤 其 是 可 以 给 旧 的 浏览 器 添加 polyfills 库 。 但 用 户 
有 可 能 会 禁用 JavaScript. 
能 够 给 任何 样式 、 属 性 、 文 本 内 容 、 其 至 DOM 结构 添加 动画 。 
交互 可 以 使 用 DOM 事件 传递 的 所 有 信息 ， 并 影响 文档 中 的 所 有 元 素 。 
多 级 和 链 式 动画 编码 困难 ， 但 JavaScript 类 库 可 以 简化 你 的 工作 (需要 
用 户 额外 下 载 )。 
。 在 作为 图 片 使 用 时 不 能 运行 ， 外 部 SVG 文件 必须 通过 <object> kA. 
选择 通常 并 不 唯一 。 特 别 是 ， 你 可 以 通过 JavaScript 来 触发 CSS 动画 ( 通 
过 改变 元 素 的 类 ) 或 动画 的 元 素 (通过 动画 元 素 的 beginElement() 方法 )。 
这 使 得 你 可 以 整合 脚本 动画 的 逻辑 性 、 可 控 性 和 声明 式 动画 的 简单 性 。 






















































































统一 的 Web 动画 模型 
Web 动画 规范 提供 了 网 页 中 所 有 定时 动画 的 总 体 描 述 。 其 统一 模型 描述 了 
SVG 动画 元 素 和 CSS 动画 特性 的 实现 。 它 还 定义 了 动态 创建 动画 效果 的 脚 
本 API。 这 些 效果 将 会 通过 指定 start 和 end 的 值 以 及 定时 参数 来 创建 ， 而 
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不 需要 设置 每 一 帧 的 中 间 值 。 这 将 结合 脚本 动画 的 可 控 性 和 声明 式 动画 语 
法 的 简单 性 及 性 能 优势 。 


在 编写 本 书 时 ， 大 多 数 浏览 器 都 正在 实现 Web 动画 API。 在 其 他 浏览 器 中 
有 一 些 JavaScript 的 polyfill 库 ， 它 们 会 把 API 指令 转换 为 一 帧 一 帧 的 动画 。 
但 polyfill 库 一 般 不 会 像 其 他 JavaScript 动画 库 一 样 对 性 能 进行 优化 。 


无 论 以 何 种 方式 给 SVG 添加 动画 ， 通 常 都 是 直接 简单 地 操作 填充 或 描 边 的 
颜色 值 。 大 多 数 其 他 表现 属性 也 同样 如 此 ， 包 括 fill-opacity 或 stroke- 


opacity. 


例 14-1 列 出 了 动画 元 素 的 基础 语法 ， 用 于 循环 使 用 不 同 的 颜色 来 填充 图 中 三 
颗 星 星 。 颜 色 循环 周期 是 3s， 但 会 无 限 重复 。 每 颗 星 星 使 用 的 颜色 序列 是 一 
举 的 ， 但 在 不 同 的 时 间 开 始 循环 。 图 14-1 显示 的 是 循环 过 程 中 的 一 个 瞬间 。 


例 14-1 使 用 动画 元 素 给 填充 色 添 加 动画 
<svg xmLns="http://www.w3.org/2000/svg" 
xmLns:XxLink="http://www.w3.org/1999/xLink" 
width="4in" height="2in" viewBox="0 0 200 100"> 
<title xml: lang="en">Simple SMIL Animation</title> 
<symbol id="star" viewBox="0 0 200 200"> 
<path d="M100,10 L150,140 20,50 180,50 50,140 Z" /> 
</symbol> 
<rect height="100%" width="100%" fill="#222"/> 
<g fill="gold"> 
<use xlink:href="#star" width="50" height="50" 
transform="translate(10,20) rotate(-10)"> 
<animate attributeName="fill" 
values="gold; LightYel Low; gold; tomato; gold" 
dur="3s" repeatDur="indefinite" /> 











> 











</use> 
<use Xlink:href="#star" width="40" height="40" 
transform="translate(140,10) rotate(20)"> 
<animate attributeName="fill" begin="-1s" 
values="gold; LightYel low; gold; tomato; gold" 
dur="3s" repeatDur="indefinite" /> 
</use> 
<use xlink:href="#star" width="35" height="35" 
transform="translate(80,60) rotate(-5)"> 
<animate attributeName="fill" begin="-2s" 
values="gold; LightYelLow; gold; tomato; gold" 
dur="3s" repeatDur="indefinite" /> 
</use> 
</g> 
</svg> 








201 


a 
El 





* 














B 14-1: 颜色 变化 的 星星 的 动画 序列 中 的 一 帧 





色 根 据 它们 的 RGB 值 来 过 渡 。 过 渡 的 中 间 值 使 用 和 渐变 相同 的 规则 来 计 
。 唯 一 的 不 同 是 动画 的 过 渡 是 时 间 上 的 ， 而 非 空 间 上 的 。 


a 


颜色 动画 会 受到 color-interpolation 属性 的 影响 。 但 正如 第 
3 章 中 提 到 的 ， 该 属性 在 Web 浏览 器 中 的 支持 程度 并 不 友好 。 

















SVG 动画 元 素 使 用 的 是 同步 多 媒体 继承 语言 (SMIL) 的 语法 ， 它 的 目的 是 
为 了 整合 音频 、 视 频 以 及 XHTML 内 容 。 你 应 该 可 以 想象 到 ， 语 法 中 包括 
多 种 同步 多 个 动画 的 选项 ， 控 制 它 们 同时 执行 还 是 一 个 接 一 个 执行 。 因 此 ， 
它 可 以 用 于 排列 复杂 的 动画 序列 。 但 这 些 复杂 的 动画 序列 不 能 很 好 地 和 交 
互 特性 结合 在 一 起 。SMIL 动画 的 声明 格式 中 没有 办 法 来 响应 当前 动画 状态 
下 的 用 户 事 件 。 
动画 元 素 语 法 的 另 一 个 限制 是 它 很 元 长 。 每 个 要 添加 动画 的 元 素 都 需要 一 
个 与 之 对 应 的 动画 元 素 。 无 法 给 多 个 动画 相同 的 图 形 组 件 快速 应 用 变化 ， 
比如 例 14-1 中 的 三 颗 星 星 。 


广泛 使 用 SVG 动画 元 素 最 显著 的 限制 是 浏览 器 的 支持 程度 较 差 。 
TE 不 支持 动画 元 素 。 编 写本 书 时 ，Chromium 团队 宣布 将 弃 


用 该 特性 。 短 期 来 看 ， 这 意味 着 会 在 使 用 动画 语法 的 网 页 的 
控制 台 报告 警告 信息 。 长 期 来 看 ， 该 动画 可 能 会 无 法 运行 。 
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对 于 简单 地 给 表现 属性 添加 动画 ，CSS 动画 提供 了 更 加 简洁 、 灵 活 的 语法 。 
例 14-2 中 使 用 CSS 动画 创建 了 完全 相同 的 星星 内 烁 的 效果 。 一 个 class 是 
用 于 给 三 颗 星 星 应 用 相同 的 动画 序列 ，nth-of-type 选择 器 用 于 改变 单个 星 
星 的 动画 开始 时 间 。 


Gil 14-2 通过 CSS 关键 帧 给 填充 色 添加 动画 
<svg xmLns="http://www.w3.org/2000/svg" 
xmlns:xlink="http: //www.w3.0rg/1999/xlink" 
width="4in" height="2in" viewBox="0 © 200 100"> 
<title xml:lang="en">Simple CSS Animation</title> 
<style type="text/css"> 
.star { 
Fill: gold; 
animation: twinkle 3s infinite; 





} 
«star: nth-of-type(3n+2){ 
animation-delay: -1s; 
} 
.star:nth-of-type(3n+3){ 
animation-delay: -2s; 
} 
@keyframes twinkle { 
25% {fill: LightYellow; } 
50% {fill: gold; } 
75% {fill: tomato;} 
} 
</style> 
<symbol id="star" viewBox="0 0 200 200"> 
<path d="M100,10 L150,140 20,50 180,50 50,140 Z" /> 
</symbol> 
<rect height="100%" width="100%" fill="#222"/> 
<use xlink:href="#star" width="50" height="50" class="star" 
transform="translate(10,20) rotate(-10)"/> 
<use xlink:href="#star" width="40" height="40" class="star" 
transform="translate(140,10) rotate(20)"/> 
<use xLink:href="#star" width="35" height="35" class="star" 
transform="translate(80,60) rotate(-5)"/> 


</svg> 
SVG 中 CSS 动画 的 主要 限制 是 只 可 以 操作 表现 属性 。 几 何 属性 (只 能 在 
XML 中 指定 ) 不 能 通过 CSS 规则 添加 动画 。SVG 2 规范 中 重新 把 一 些 布局 


属性 定义 为 表现 属性 ， 但 许多 SVG 特性 依然 无 法 通过 CSS 动画 访问 。 
CSS 动画 也 不 适用 于 长 序列 的 连续 动画 ， 且 只 能 响应 有 限 的 一 组 用 户 行为 。 








CSS 动画 在 一 些 还 在 使 用 中 的 旧版 本 的 浏览 器 中 不 支持 。 但 
在 除 最 新 版 外 的 所 有 WebKit 浏览 器 中 ，CSS 动画 需要 添加 
-webkit- 前 级 ， 这 意味 着 你 将 需要 复制 动画 属性 和 关键 帧 规 
|, IE 不 支持 在 SVG 元 素 上 使 用 CSS 动画 ， 但 在 Edge i 
览 器 中 可 能 加 以 支持 。 








= 


要 想 让 动画 得 到 更 普遍 的 支持 ， 你 可 以 使 用 JavaScript 来 操作 DOM. Xf 
于 简单 的 线性 动画 ， 你 可 以 直接 循环 所 有 的 中 间 值 ， 并 使 用 request 
AnimationFrame 方法 来 在 浏览 器 更 新 显示 时 更 新 图 形 。 对 于 更 复杂 的 多 级 
动画 (例如 交错 的 颜色 变化 )， 你 可 能 需要 使 用 专门 的 JavaScript 动画 库 ， 
它 将 会 把 你 声明 的 语句 (哪些 属性 添加 动画 ， 改 变 多 少 ) 进行 优化 并 一 帧 
一 帧 地 调整 。 


14.2 ”坐标 动画 

填充 和 描 边 的 颜色 动画 是 比较 直接 的 。 无 论 是 动画 元 素 还 是 CSS 动画 ， 浏 
览 器 都 会 在 你 指定 的 颜色 之 间 过 渡 。 但 对 于 浑 染 服务 是 怎样 的 呢 ? 这 会 变 
得 更 加 复杂 。fill 和 stroke 属性 实际 使 用 的 值 将 会 是 一 个 URL。 浏 览 器 无 
法 生成 两 个 URL 之 间 的 中 间 值 。 











规范 中 允许 在 动画 过 程 中 修改 URL 的 值 。 但 浏览 器 的 支持 
程度 较 差 ， 编 写本 书 时 ， 仅 限于 Firefox 的 SMIL 动画 。 











但 泻 染 服务 元 素 本 身 是 可 以 添加 动画 的 。 渐 变 结 点 的 颜色 和 不 透明 度 的 值 
可 以 通过 CSS 添加 动画 ， 也 可 以 对 图 案 内 容 的 表现 样式 添加 动画 。 在 将 来 ， 
渐变 和 图 案 的 转换 也 会 受到 CSS 动画 的 transform 属性 影响 。 这 些 属性 以 
及 更 多 的 结构 属性 可 以 通过 SVG 标记 或 JavaScript 来 添加 动画 。 

给 泻 染 服务 添加 动画 与 给 fill 和 stroke 泻 染 属性 添加 动画 有 一 个 很 重要 的 
不 同 。 动 画 会 自动 影响 所 有 使 用 该 泻 染 服务 的 元 素 ， 且 同时 改变 它们 。 

这 个 特性 是 否 真 的 需要 取决 于 图 形 的 具体 细 市 。14.3 市 将 探讨 当 你 不 希望 
所 有 元 素 都 同时 改变 时 的 代替 方法 。 特 别 之 处 是 该 部 分 将 重点 关注 使 用 动 
画 来 突出 用 户 正在 进行 交互 的 特定 元 素 。 相 比 之 下 ， 对 于 许多 声明 式 动 画 
来 说 ， 同 步 动画 是 可 接受 的 ， 甚 至 是 我 们 所 期 望 的 。 
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例 14-3 中 使 用 同步 动画 来 改编 星星 闪烁 的 动画 。 现 在 ， 我 们 不 是 给 星星 上 
的 填充 颜色 添加 动画 ， 而 是 把 动画 应 用 在 一 系列 <stop> 元 素 的 stop-color 




















值 。 动 画 代码 看 起 来 非常 相似 。 图 





14-2 显示 了 渐变 填充 的 星星 的 一 个 屏幕 


截图 ， 你 需要 自己 运行 代码 来 看 到 完整 的 闪烁 效果 。 


例 14-3 使 用 CSS 给 渐变 结 点 颜色 添加 动画 
<svg xmLns="http://www.w3.org/2000/svg" 
xmlns:xlink="http: //www.w3.0rg/1999/xlink" 





width="4in" height="2in" 


viewBox="0 0 200 100"> 


<title xml: lang="en">CSS-Animated Gradient</title> 


<style type="text/css"> 
.star { 
fill: url(#shine); 
} 
#shine stop { 
stop-color: gold; 


animation: twinkle 3s infinite; 


} 


#shine stop:nth-of-type(3n+2){ 
animation-delay: -1s; 


} 


#shine stop:nth-of-type(3n+3){ 
animation-delay: -2s; 


} 
@keyframes twinkle { 


25% {stop-color: LightYellow; } 
50% {stop-color: gold; } 
75% {stop-color: tomato; } 


} 
</style> 


<symbol id="star" viewBox="0 0 200 200"> 


<path d="M100,10 L150, 


</symbol> 


<linearGradient id="shine" 


<stop offset="0" /> 


140 20,50 180,50 50,140 Z" /> 


gradientTransform="rotate(20)"> 


<stop offset="0.25" /> 


<stop offset="0.5" /> 


<stop offset="0.75" /> 


<stop offset="1" /> 
</linearGradient> 


<rect height="100%" width="100%" fill="#222"/> 

<use xlink:href="#star" width="50" height="50" class="star" 
transform="translate(10,20) rotate(-10)"/> 

<use xlink:href="#star" width="40" height="40" class="star" 
transform="translate(140,10) rotate(20)"/> 

<use xLink:href="#star" width="35" height="35" class="star" 
transform="translate(80,60) rotate(-5)"/> 


</svg> 




















B 14-2: 使 用 震荡 渐变 的 星星 的 动画 序列 的 一 帧 


往复 的 颜色 结 点 也 可 以 使 用 SMIL 式 的 动画 元 素来 创建 ， 通 过 在 每 个 
元 素 内 添加 一 个 <animate> 元 素 。 但 在 一 些 CSS 动画 无 法 做 到 的 习 
上 ， 动 画 元 素 就 显得 更 加 有 用 : 比如 修改 几何 属性 。 


例 14-4 中 使 用 两 个 动画 元 素来 修改 <linearGradient> 元 素 的 x1 和 y2 属性 。 
它 的 静态 屏幕 截图 与 图 14-2 plies 但 动态 效果 会 有 很 大 不 同 : 每 个 星 
星 不 只 是 在 恰当 的 位 置办 烁 ， 还 会 像 柔 和 的 波浪 一 样 延 伸 和 移动 。 


例 14-4 使 用 动画 元 素 给 渐变 矢量 添加 动画 
<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xLink="http: //www.w3.org/1999/xLink" 
width="4in" height="2in" viewBox="0 0 200 100"> 
<title xml: lang="en">SMIL-Animated Gradient</title> 
<style type="text/css"> 
.Star { 
fill: url(#shine); 














a 

































































} 
</style> 
<symbol id="star" viewBox="0 0 200 200"> 
<path d="M100,10 L150,140 20,50 180,50 50,140 Z" /> 
</symbol> 
<linearGradient id="shine" spreadMethod="repeat" 
gradientTransform="rotate(20)" > 
<animate attributeName="y2" values="1;1.53;1;0.75;1" 
dur="2s" repeatDur="indefinite" /> 
<animate attributeName="x1" values="0;0.5;0" 
dur="3s" repeatDur="indefinite" /> 
<stop offset="0" stop-color="gold" /> 
<stop offset="0.25" stop-color="lightYellow" /> 





<stop offset="0.5" stop-color="gold" /> 
<stop offset="0.75" stop-color="tomato" /> 
<stop offset="1" stop-color="gold" /> 
</linearGradient> 
<rect height="100%" width="100%" fill="#222"/> 
<use xLink:href="#star" width="50" height="50" class="star" 
transform="translate(10,20) rotate(-10)"/> 
<use xLink:href="#star" width="40" height="40" class="star" 
transform="translate(140,10) rotate(20)"/> 
<use xLink:href="#star" width="35" height="35" class="star" 
transform="translate(80,60) rotate(-5)"/> 
</svg> 


当 渐 变 使 用 SMIL 添加 动画 时 ，Firefox 和 WebKit 浏览 器 日 
前 都 不 会 更 新 绘制 的 图 形 (只 能 在 Blink 浏览 器 中 工作 )。 


























使 用 JavaScript (而 不 用 SMIL) 修改 渐变 属性 来 创建 这 种 效果 可 以 获得 更 
好 的 训 览 器 支持 。 但 这 里 三 颗 星星 的 动画 将 完全 同步 ， 因 为 他 们 都 使 用 相 
同 的 渐变 

对 于 某 些 图 形 ， 也 许 你 可 以 通过 使 用 每 个 形状 内 略 不 相同 的 重复 
userSpaceOnUse 图 形 来 扰乱 这 种 重复 效果 。 但 对 于 这 三 颗 星 星 ， 这 种 方式 
没有 任何 效果 : 每 颗 星 星相 对 于 自己 的 <symbol> 坐标 系 位 置 相同 ， 所 以 每 
颗 星 星 绘制 在 用 户 空间 渐变 内 相同 的 点 上 。 





























聚焦 未 来 
渐变 之 间 的 过 渡 
依据 CSS Image Values and Replaced Content Module Level 3 的 最 新 草案 ， 在 
一 些 浏览 器 中 可 以 给 CSS 渐变 函数 添加 动画 (通过 CSS 动画 )。 要 想 在 两 个 渐 
变 之 间 过 渡 ， 它 们 的 类 型 必须 相同 (例如 ， 都 是 repeating-linear-gradient) ， 
且 结 点 的 数量 也 必须 相同 。 之 后 单独 在 结 点 偏 移 和 颜色 上 进行 过 渡 。 


不 支持 渐变 插值 的 浏览 器 将 会 忽略 所 有 在 @keyframes 中 设 
置 的 值 ， 且 不 进行 过 滤 并 立即 应 用 其 他 的 变化 。 


CSS 过 渡 规 范 中 有 提案 建议 通过 URL 引用 SVG 渐变 可 以 以 同样 的 方式 过 
渡 。 换 和 话说， 如 果 两 个 渐变 类 型 相同 且 结 点 的 个 数 也 相同 ， 当 通过 CSS 
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动画 或 过 渡 切 换 泻 染 服 务 时 ， 浏 览 器 将 会 生成 所 有 的 中 间 值 。 ne 
时 ， 还 没有 任何 浏览 器 实现 该 功能 ， 且 对 把 它 加 入 最 终 规 范 存在 反对 意 
Level 4 规范 中 引入 了 一 个 替代 的 过 沪 模 式 cross-fading， 它 eve 
片 溶解 到 另 一 张 图 片 内 ， 这 更 方便 应 用 在 SVG 泻 染 服务 的 内 容 中 。 


14.3 ”交互 动画 


动画 在 现代 站 点 中 最 重要 的 用 途 之 一 是 提供 用 户 反馈 和 连续 性 。 在 用 户 进 
行 交 互 时 ， 内 容 应 该 明显 变化 ， 但 变化 应 该 平滑 过 渡 ， 这 样 用 户 才 可 以 直 
观 地 理解 新 旧 状 态 的 关系 。 


如 果 使 用 动画 来 表示 用 户 和 特定 元 素 之 间 的 交互 ， 你 显然 不 能 让 网 页 上 所 
有 相似 的 元 素 同时 触发 相同 的 动画 。 一 种 解决 方式 是 专门 创建 一 个 演 染 服 
务 元 素 (或 多 个 元 素 ) 来 应 用 动画 效果 ， 且 只 在 需要 的 时 候 使 用 它 。 同 时 
通过 其 他 这 染 服务 绘制 元 素 的 静态 状态 。 

当 用 户 和 一 个 元 素 (图 形 图 标 ) 交互 时 ， 给 另 一 个 元 素 GAAS) 添加 
动画 难以 通过 CSS 动画 实现 。 有 时 可 以 通过 兄弟 选择 器 和 子 选 择 器 来 完成 ， 
但 你 必须 把 标记 重新 排列 为 一 个 相当 凌乱 的 结构 。 因 此 ， 我 们 首先 使 用 基 
于 SMIL 的 方法 来 描述 要 实现 什么 ， 然 后 展示 如 何 使 用 JavaScript (THE 
更 大 ,但 更 加 灵活 且 浏 览 器 支持 较 好 ) 创建 相同 的 效果 。 


SMIL 动画 方法 利用 定时 属性 来 同步 多 个 动画 。 使 用 <set> 元 素来 把 共享 

的 、 静 态 的 新 变 谊 染 服 务 切换 到 有 动画 的 这 染 服 务 ， 然 后 使 用 <animate> 元 

素来 实现 效果 。 最 后 ， 另 一 个 <set> 元 素 把 图 形 切换 到 最 终 状 态 ， 即 再 次 

变 为 共享 的 泻 染 服务 。 
Blink 和 WebKit 浏览 器 不 会 正确 地 给 应 用 演 染 服务 的 URL 
添加 动画 ， 即 使 使 用 <set> 元 素 也 不 行 ， 填 充值 将 会 被 透明 
(WebKit) 或 纯 黑 色 (Blink) 替换 。 由 于 Chromium Ji A it 
划 不 推荐 使 用 SMIL， 因 此 预计 这 不 会 被 修复 。 所 以 该 例子 
只 能 在 Firefox 中 运行 。 





























































































































例 14-5 中 使 用 这 种 方法 实现 了 星星 图 标 上 的 点 击 效 果 ， 这 可 能 会 用 在 喜欢 
或 书签 元 素 上 。 它 使 用 我 们 之 前 在 第 8 章 星 级 图 标示 例 中 看 到 的 银色 和 人 金 
色 线 性 渐变 ， 以 及 一 个 额外 的 径 向 渐变 来 作为 过 渡 效 果 。 
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星星 刚 开 始 使 用 银 - RA Re. i, TER A EE Za, — 
个 金色 的 填充 从 元 素 的 中 心 辐射 出 来 。 动 画 效果 设计 所 有 三 个 渐变 ， 在 一 
个 <pattern> 元 素 内 布局 。 除 了 给 径 癌 渐变 的 半径 添加 动画 外 ， 图 层 的 不 透 
明度 也 在 平 请 地 过 渡 。 


图 14-3 显示 了 一 个 平面 截图 ， 其 中 一 个 图 标 已 经 是 最 终 的 金 色 状 态 , 一 
是 初始 的 银色 状态 ， 男 一 个 刚刚 被 点 击 且 辐 射 动 画 只 进行 了 一 部 分 。 










































































图 14-3: 一 个 交互 动画 网 页 的 截图 ， 最 后 一 个 图 标 刚 被 选中 不 久 


例 14-5 通过 动画 元 素 给 单个 元 素 添 加 响应 用 户 交 互 的 动画 
HTML 标记 : 








<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Interactive Animated Gradient with SMIL</title> 
<style type='text/css'> 
/* styles must be in the same document */ 
</style> 
</head> 
<body> 
<svg class="defs-only" 
aria-hidden="true" focusable="false" width="0" height="0" > 
<linearGradient id="silver-shine" spreadMethod="repeat" 
gradientTransform="rotate(20)" > 
<stop offset="0" stop-color="gray" /> 























<stop offset="0.35" stop-color="silver" /> 
<stop offset="1" stop-color="gray" /> 
</linearGradient> 
<linearGradient id="gold-shine" spreadMethod="repeat" 
gradientTransform="rotate(20)" > 
<stop offset="0" stop-color="gold" /> 
<stop offset="0.35" stop-color="lightYellow" /> 
<stop offset="1" stop-color="gold" /> 
</linearGradient> 
<radialGradient id="gold-ripple" r="0.2"> (1) 
<animate id="ripple" 
attributeName="r" from="0.1" to="1" 
dur="0.7s" fill="freeze" 
begin="reaction.begin + 0.1s" /> 
<stop offset="0" stop-color="gold" /> 
<stop offset="0.5" stop-color="LightYellow" /> 
<stop offset="0.75" stop-color="silver" /> 
<stop offset="1" stop-color="gray" /> 
</radialGradient> 
<pattern id="turn-gold" width="1" height="1" 
patternContentUnits="objectBoundingBox"> 
<rect fill="url(#gold-shine)" width="1" height="1" /> 
<rect fill="url(#silver-shine)" width="1" height="1" > 
<set attributeName="opacity" to="0" 
begin="reaction.begin + 0.5s" /> © 
</rect> 
<rect fill="url(#gold-ripple)" width="1" height="1" > 
<animate id="reaction" 
attributeName="opacity" 
values="0;1;1;0" 
keyTimes="0;0.2;0.8;1" 
dur="1s" 
begin="switch1. begin; 
switch2.begin; switch3.begin" /> 
</rect> 
</pattern> 


<symbol id="star" viewBox="0 0 200 200"> 
<path d="M100,10 L150,140 20,50 180,50 50,140 Z" /> 


</symbol> 
</svg> 
<hi>Pick your favorites:</h1i> 
<div> 
<figure id="opti" role="checkbox" tabindex="0"> (4) 


<figcaption>Option 1</figcaption> 
<svg><use Class="star" xlink:href="#star"> 
<set id="switch1" 
attributeName="filLl" to="url(#turn-gold)" 
dur="1s" begin="opt1.click; opt1.activate"/> 
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<set attributeName="fill" to="url(#gold-shine)" 


dur="indefinite" begin="switch1.end" /> 


</use></svg> 
</figure> 


<figure id="opt2" role="checkbox" tabindex="0"> 


<figcaption>Option 2</figcaption> 


<svg><use Class="star" xlink:href="#star"> 


<set id="switch2" 


attributeName="filLl" to="url(#turn-gold)" 


© 


dur="1s" begin="opt2.click; opt2.activate"/> 
<set attributeName="fill" to="url(#gold-shine)" 
dur="indefinite" begin="switch2.end" /> 


</use></svg> 
</figure> 


<figure id="opt3" role="checkbox" tabindex="0"> 


<figcaption>Option 3</figcaption> 


<svg><use Class="star" xlink:href="#star"> 


<set id="switch3" 


attributeName="filL" to="url(#turn-gold)" 


© 


dur="1s" begin="opt3.click; opt3.activate"/> 
<set attributeName="fill" to="url(#gold-shine)" 
dur="indefinite" begin="switch3.end" /> 


</use></svg> 
</figure> 
</div> 
<script> 


/* do something based on the selected options */ 


</script> 
</body> 
</html> 


O 前 两 个 是 普通 的 线性 渐变 。 但 新 的 径 问 渐变 包含 一 个 <animate> 元 素来 
操作 它 的 r 属性 。 该 动画 在 id 为 reaction 的 动画 开始 执行 十 分 之 一 秒 


后 执行 。 


O <pattern> 元 素 包 含 了 所 有 需要 添加 过 渡 动 画 的 层 ， 作 为 单个 磁 贴 来 完 


全 填充 形状 边界 盒 。 





O 图 案 内 还 嵌 套 了 两 个 动画 元 素 : <set> THIELE Pi 








i 的 层 从 银色 切换 





到 金色 ，<animate> 元 素 对 径 向 渐变 的 不 透明 度 先 增 后 减 。 后 一 个 动画 
有 一 个 reaction 的 ID 值 ， 用 于 触发 其 他 两 个 过 流动 画 。reaction 动画 


本 身 在 三 个 切换 动画 中 任 一 个 开始 的 时 候 启 动 。 


O 在 主要 的 网 页 标记 中 ， 包 于 SVG 动画 的 <figure> 元 素 等 价 于 复 选 框 ， 
所 以 给 它 添加 了 ARIA 的 role="checkbox" 标识 。 每 个 SVG 包含 一 个 











<use> 元 素 ， 和 内 联 图 标 一 样 。 但 每 个 <use> 元 素 内 还 包含 两 个 动画 元 素 。 
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© switchi 动画 是 一 个 响应 复 选 框 <figure> 上 点 击 或 激活 事件 的 <set> 元 
素 ， 它 会 将 相关 图 标 从 银色 渐变 切换 到 过 渡 图 案 ， 然 后 开始 执行 动画 。 
第 二 个 <set> 元 素 在 动画 完成 后 再 次 把 填充 切换 为 最 终 的 金色 状态 。 

O 其 他 的 图 标 使 用 相同 的 动画 结构 ， 但 是 ID 都 唯一 。 

CSS 样式 : 


html { 
background-color: #222; 
color: lightSkyBlue; 





svg.defs-only { 
display: block; 
position: absolute; 
height: 0; width: 0; 
overflow: hidden; 


} 


figure[role="checkbox"] { 
display: inline-block; 
max-width: 33%; 
min-width: 5em; 
padding: 0; margin: 0; 
font-size: larger; (1) 
} 
figcaption { 
display: block; 
text-align: center; 
} 
figure[role="checkbox"] > svg { 
display: block; 
margin: auto; 
width: 4em; 
height: 4em; 


} 
.star { 

fill: url(#silver-shine); 

cursor: pointer; (2) 
} 


O 使 用 role 属性 值 为 checkbox 来 控制 布局 ， 而 没有 用 CSS 类 选择 器 。 


O CSS 中 同样 设置 星星 图 标的 默认 填充 值 为 银灰 色 渐 变 。 将 鼠标 指针 设 为 
pointer 将 使 鼠标 用 户 知道 该 内 容 是 可 交互 的 。 


除了 浏览 器 支持 程度 低 以 外 ， 该 方法 还 有 其 他 局 限 。 











。 如 果 用 户 在 1 秒 内 选择 了 两 个 不 同 的 图 标 ， 第 一 个 动画 将 会 被 重 置 为 与 
第 二 个 动画 同步 。 
驱动 主要 reaction 动画 的 动画 元 素 必 须 在 begin 属性 内 添加 所 有 可 以 触 
发 它 的 事件 。 例 14-5 中 通过 响应 <set> 动画 来 简化 它 ， 而 不 是 使 用 原始 
的 用 户 事件 。 但 如 果 要 向 网 页 内 添加 新 的 交互 图 标 ， 仍 然 需要 在 begin 
属性 内 添加 新 的 值 。 
在 图 标 再 一 次 被 点 击 的 时 候 ， 选 择 状 态 不 会 切换 ， 且 动画 也 不 会 回 退 。 
后 续 的 点 击 会 重新 启动 相同 的 动画 序列 ， 但 不 会 取消 已 经 选择 的 条 目 。 
如 果 想 实现 一 个 反 向 的 动画 ， 需 要 单独 添加 一 个 透明 的 SVG 元 素 (使 用 
另 一 个 <set> 动画 )， 当 图 标 被 选中 时 显示 在 图 标的 最 上 层 并 捕获 所 有 的 
用 户 事件 (使 用 pointer-events:all)。 该 元 素 将 用 于 触发 取消 选择 *。 你 
还 需要 一 个 <animate> 和 <set> 元 素来 控制 反 向 的 动画 序列 。 
虽然 图 标 已 经 赋予 了 ARIA 的 复 选 框 角色 ， 以 便 屏幕 阅读 器 用 户 可 以 激 
活 它 们 ， 但 元 素 的 选中 状态 在 图 标 被 选中 时 不 会 更 新 。 这 需要 在 脚本 中 
实现 ，SMIL 动画 在 任何 浏览 器 中 都 不 可 以 修改 HTML 元 素 上 的 属性 。 

这 些 问 题 在 例 14-6 中 得 到 了 解决 : 使 用 JavaScript 来 控制 有 复 选 框 逻 辑 的 

动画 。 它 还 添加 了 对 键盘 的 支持 并 增加 了 一 个 新 功能 : 当 图 标 通 过 鼠标 

click 或 tap 激活 时 ， 径 向 渐变 从 触摸 点 开始 向 外 扩展 。 这 种 对 用 户 事件 微 

妙 的 反应 是 许多 交互 设计 指南 中 所 推荐 的 ， 包 括 谷 歌 的 Material Design 设 

计 指 南 。 

Gil 14-6 通过 JavaScript 给 单个 元 素 添 加 响应 用 户 交 互 的 动画 

HTML 标记 : 


































































































<!DOCTYPE htmL> 
<html Lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Interactive Animated Gradient with JavaScript</title> 
<style type='text/css'> 
/* styles unchanged */ (1) 
</style> 
</head> 
<body> 








TE 2: 如 果 你 对 创建 切换 的 SMIL 动画 感 兴趣 (对 于 其 他 类 型 的 动画 ， 比 如 形状 变形 ， 浏 
览 器 的 支持 程度 更 好 )，Michael J. Harris 写 了 一 个 很 好 的 教程 (http://codepen.io/ 
mikemjharris/blog/svg-toggling ) 。 
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<svg class="defs-only" 
aria-hidden="true" focusable="false" width="0" height="0" > 
<linearGradient id="silver-shine" spreadMethod="repeat" 
gradientTransform="rotate(20)" > 
<stop offset="0" stop-color="gray" /> 
<stop offset="0.25" stop-color="silver" /> 
<stop offset="1" stop-color="gray" /> 
</linearGradient> 
<LinearGradient id="gold-shine" spreadMethod="repeat" 
gradientTransform="rotate(20)" > 
<stop offset="0" stop-color="gold" /> 
<stop offset="0.25" stop-color="LightYellow" /> 
<stop offset="1" stop-color="gold" /> 
</linearGradient> 
<radialGradient id="gold-ripple" r="0.2"> 
<stop offset="0" stop-color="gold" /> 
<stop offset="0.5" stop-color="LightYellow" /> 
<stop offset="0.75" stop-color="silver" /> 
<stop offset="1" stop-color="gray" /> 


</radialGradient> 
<pattern id="turn-gold" width="1" height="1" 
patternContentUnits="objectBoundingBox"> (2) 


<rect class="transition" 
fill="url(#gold-ripple)" width="1" height="1" /> 
<rect class="on" 
fill="url(#gold-shine)" width="1" height="1" /> 
<rect class="off" 
fill="url(#silver-shine)" width="1" height="1" /> 
</pattern> 
<symbol id="star" viewBox="0 0 200 200"> 
<path d="M100,10 L150,140 20,50 180,50 50,140 Z" /> 
</symbol> 
</svg> 
<hi>Pick your favorite:</hi> 
<div> 
<figure id="opt1" role="checkbox"> 
<figcaption>Option 1</figcaption> 
<svg><use xLink:href="#star" /></svg> © 
</figure> 
<figure id="opt2" role="checkbox"> 
<figcaption>Option 2</figcaption> 
<svg><use xlink:href="#star"/></svg> 
</figure> 
<figure id="opt3" role="checkbox"> 
<figcaption>Option 3</figcaption> 
<svg><use xlink:href="#star"/></svg> 
</figure> 
</div> 
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<script> 
/* Script included at end of file 
or as an async-loaded external resource */ 
</script> 
</body> 
</html> 


@ 基础 的 样式 与 例 14-5 中 完全 一 样 。 


© 渐变 和 图 案 基 本 一 样 。 删 除了 动画 元 素 ， 且 图 案 层 级 重新 排列 以 使 动画 
代码 更 加 简单 。 


© 除 删除 了 动画 元 素 外 ， 网 页 标记 也 相同 。 

















JavaScript: 
(function(){ 
var toggles = document.querySelectorALl('"[role='checkbox']"); 
var selectGraphic = ".star"; 


var svg = document.querySelector("svg"); 
//arbitrary <svg> element so that 
//we can access SVG dom methods 
var paint = { 
off: "url(#silver-shine)", 
animate: "url(#turn-gold)", 
on: "url(#gold-shine)" 


F 0 
var animating = false, 
animatingOption, 
nextFrame; 
for (var i=0, n=toggles.length; i<n; i++){ (2) 


toggles[i].setAttribute("aria-checked", false); 
toggles[i].querySelector(selectGraphic).style. fill 
= paint.off; 
toggles[i].addEventListener("click", toggleState) ; 
toggles[i].addEventListener("keyup", checkKey) ; 


//tell Internet Explorer not to focus <svg> 
toggles[i].querySelector("svg") 
.setAttribute("focusable", false); 
} 
function checkKey(e) { © 
//check for spacebar or Enter key, 
//using both the new standard syntax 
//and the old keycode syntax 
if ( (e.key == " ")||(e.key == "Enter") || 
(e.keyCode == 32 )||(e.keyCode == 13) ) 
toggleState.apply(this, arguments); 





a 
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} 
function toggleState(e){ (4) 
var currentlyChecked = 
(this.getAttribute("aria-checked") 
=== true.toString() ); 


//update the actual state 
this.setAttribute("aria-checked", !currentlyChecked) ; 
/* maybe do something based on the selected options */ 


if (currentlyChecked) { 
//animate turning off quickly 


animateStar(this, e, 300, true); © 
} 
else { 

//animate turning on, more slowly 

animateStar(this, e, 1000); 
} 


} 


function animateStar(option, event, dur, reverse) { 
if ((!dur)||isNaN(dur)) return; 
//must have a valid animation duration 


/* animation parameters */ 

var effects = [ O 
{selector:"#gold-ripple", attr:"r", 
fron:0.1,. toit,.t1:6.1,. £2:0.8}, 
{selector:"#turn-gold .on", attr:"opacity", 
from:0, tord, €1:0,8;. t221}, 
{selector:"#turn-gold .off", attr:"opacity", 
from:1, to:0, t1:0, t2:0.2} 
J; 

var selectTracker = "#gold-ripple"; 

var star = option.querySelector(selectGraphic) ; 

var startTime = 0; 


if (reverse) { 
//swap the order of each effect 
effects. forEach(function(effect){ 
var swap = effect.from; 
effect.from = effect.to; 
effect.to = swap; 


swap = effect.t1; 
effect.t1 = 1 - effect.t2; 
effect.t2 = 1 - swap; 

}); 
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} 


if (animating){ o 


} 


//abort current animation 
cancelAnimationFrame(nextFrame); 


if (animatingOption != option) { 

//tidy up the current animation by setting 

//it to the correct end state 

animatingOption.querySelector(selectGraphic) 
.style.fill = 
(animatingOption.getAttribute("aria-checked") 

=== true.toString() ) ? 

paint.on : paint.off; 


} 
else { 

//set the new animation to start 

//from the current state 

effects. forEach(function(effect){ 

effect.from = parseFloat( 
document. querySelector(effect.selector) 
.getAttribute(effect.attr) ); 
ps 

} 


var track = document.querySelector(selectTracker); 
if (event instanceof MouseEvent) { O 


//recenter the radial gradient 

//to track the mouse event 

//by converting mouse coordinates first to 

//userSpace coordinates for the star, 

//and then to bounding box coordinates 

var bbox = star.getBBox(), 
CTM = star.getScreenCTM().inverse(), 
p = svg.createSVGPoint(), 
p2, newCx, newCy; 

p.x = event.clientX; //NOT screenX and screenY 

p.y = event.clientY; 

p2 = p.matrixTransform(CTM); 

newCx = (p2.x - bbox.x)/bbox.width; 

newCy = (p2.y - bbox.y)/bbox.height; 

if (!animating ||(animatingOption != option)) { 
//start immediately at the mouse point 
track.setAttribute("cx", newCx); 
track.setAttribute("cy", newCy); 

} 


else { 
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//create an animated shift in the gradient center 
var oldCx = parseFloat(track.getAttribute("cx")); 
var oldCy = parseFloat(track.getAttribute("cy")); 
effects. push( 
{selector: selectTracker, attr:"cx", 
from: oldCx, to: newCx, 
EDS g, “E22 8.2 
F); 
effects.push( 
{selector: selectTracker, attr:"cy", 
from: oldCy, to: newCy, 
tis Oi t23 0.2 


}); 
} 
} 
else { 
//center gradient if triggered by keyboard event 
track.setAttribute("cx", 0.5); 
track.setAttribute("cy", 0.5); 
} 


//set overall animation parameters and initialize 
animating = true; 
animatingOption = option; 
requestAnimationFrame(function(t){ 

startTime = t; 

star.style.fill = paint.animate; © 
); 


//create a function to transform a time point 
//into a position in the animation effects 
var getProgress = function(t){ return (t-startTime)/dur; }; 


//determine which element will be animated for each effect 
//and the total amount of change 
effects. forEach(function(effect){ 
effect.node = document.querySelector(effect.selector); 
effect.by = effect.to - effect.from; 
}) 


function applyEffects(t){ © 
var a = getProgress(t), 
val; 
effects. forEach(function(effect){ 
if(a <= effect.t1) { 
val = effect.from; 


} 
else if (a >= effect.t2) { 





val = effect.to; 


else { 
val = effect.from + effect. by*( 
(a - effect.t1)/(effect.t2 - effect.t1) ); 


effect.node.setAttribute(effect.attr, val); 
H; 


if (a< 1) { 
// loop 


nextFrame = requestAnimationFrame(appLlyEffects) ; 
} 
else { 
//animation is complete 
star.style.fill = reverse? paint.off : paint.on; 
animating = false; 
} 
} 
//start updating 
nextFrame = requestAnimationFrame(appLyEffects); 


} 
NOs 


@ 脚本 开始 先 声明 一 组 函数 调用 期 间 共用 的 常量 和 变量 。 包 括 一 组 类 复 选 
框 的 元 素 ， 用 于 标识 将 要 更 改 的 图 形 的 选择 器 ， 一 个 随机 的 将 在 SVG 通 
用 方法 内 使 用 的 <svg> 元 素 ， 以 及 将 会 使 用 的 特定 填充 值 的 引用 ， 这 样 
我 们 就 可 以 方便 地 更 新 他 们 。 


O for 循环 初始 化 每 个 切换 元 素 (类 复 选 框 元 素 ) 为 未 选中 的 状态 ， 同 时 添 
加 事件 监听 器 。 


© checkKey 辅助 函数 用 于 响应 键盘 事件 ， 并 检测 切换 的 状态 是 否 应 该 改 
变 。 如 果 符 合 要 求 ， 则 调用 主要 的 事件 处 理 函 数 并 传 入 当前 上 下 文 以 及 
参数 。 

© toggleState 方法 可 以 直接 通过 点 击 事件 触发 或 间接 通过 键盘 事件 触发 。 
它 会 更 改 当 前 元 素 的 aria-checked 属性 ， 并 开始 过 流动 画 。 

© animateStar 函数 进行 开始 动画 前 需要 的 所 有 计算 。 参 数 表示 动画 应 该 持 
续 多 长 时 间 ， 动画 是 否 是 从 选中 状态 回 退 到 未 选中 状态 。 

O 整个 动画 定义 为 一 个 不 同 效果 的 数组 。 每 种 效果 的 对 象 描述 了 要 修 
改 哪个 元 素 (使 用 CSS 选择 器 的 值 )， 改 变 哪个 属性 (attr), mae 
值 (from) 和 最 终 值 (to) 分 别 是 什么 ， 以 及 动画 的 开始 (t1) 和 结束 





















































动画 | 219 


(t2) 点 与 整个 动画 持续 时 间 的 比例 。 硬 编码 的 值 描述 的 是 动画 的 方向 ， 
如 果 动 画 应 该 反 向 运行 ， 就 会 交换 对 应 的 值 。 

@ if(animating) 代码 块 包含 了 防止 两 个 动画 冲突 的 代码 ， 它 们 修改 的 是 同 
一 个 泻 染 服务 元 素 。 

O 接 下 来 的 代码 块 首先 测试 动画 是 否 是 鼠标 点 击 屏幕 触发 的 ， 如 果 是 ， 就 
调整 渐变 围绕 触摸 点 向 外 辐射 或 向 内 收缩 。 

© 只 调用 一 次 的 requestAnimationFrame 函数 用 于 保存 动画 开始 的 时 间 惟 ， 
并 把 泻 染 服务 变 为 有 动画 的 图 案 。 

© 动画 的 剩余 部 分 使 用 requestAnimationFrame 重复 调用 appLyEffects A 
数 ， 以 此 来 更 新 所 有 过 渡 属 性 而 不 必 担 心 大 量 额外 的 计算 影响 它 的 速度 。 


标记 几乎 与 例 14-5 中 完全 相同 ， 只 是 删除 了 动画 元 素 。 唯 一 的 改变 是 
<pattern> 元 素 内 层级 的 顺序 一 这 个 改变 人 允许 每 个 动画 效果 使 用 从 一 个 值 
变 为 另 一 个 值 的 单 向 动画 来 描述 。 我 们 没有 让 有 动画 的 径 向 渐变 层 先 淡 入 
后 淡出 ， 而 是 把 它 绘制 为 最 下 面 的 一 层 ， 然 后 让 上 面 的 两 个 线性 渐变 层 痰 
入 或 淡出 。 


触发 用 户 事件 后 总 体操 作 如 下 。 


(1) 确定 该 操作 是 选中 还 是 取消 ， 并 更 新 ARIA 的 状态 (toggleState 图 数 ) 。 
这 里 也 是 添加 所 有 与 选中 和 取消 选中 相关 的 行为 的 地 方 。 


(2) 调 用 动画 启动 函数 (animatestar)， 运 行 1000ms 的 开启 动画 或 300ms 
的 关闭 动画 。 时 间 以 毫秒 为 单位 ， 这 是 因为 大 多 数 JavaScript 和 DOM 的 
时 间 方 法 使 用 的 是 毫秒 。 关 闭 动画 运行 得 更 快 ， 因 为 我 们 想 要 非常 明确 
地 响应 用 户 取 消 选 择 的 操作 。 

(3) 检查 是 否 有 动画 正在 执行 ， 如 果 有 ， 就 取消 挂 起 的 动画 请 求 。 如 果 正 在 
执行 动画 的 是 另 一 个 星星 ， 立 即 把 该 星星 置 为 最 终 状 态 。 另 外 ， 如 果 是 
同一 颗 星 星 ， 调 整 当前 动画 的 参数 使 它 可 以 从 当前 状态 平稳 地 继续 。 


(4) 如 果 是 鼠标 事件 (包括 触摸 屏 上 tap 创建 的 点 击 )， 把 径 向 渐变 的 中 心 设 
为 该 触发 事件 的 点 。 本 节 还 使 用 了 许多 SVG DOM 特有 的 方法 。 


* element.getBBox() 返回 对 象 在 其 局 部 坐标 系 中 的 边界 盒 , (ALE x, 
y, width 和 | height 属性 的 对 象 。 

。 element.getScreenCTM() 返回 元 素 坐 标 系 与 页 面 根 坐 标 系 之 间 的 累积 
变换 矩阵 〈《CTM)。 它 不 是 鼠标 事件 使 用 的 屏幕 坐标 系 ， 而 是 客户 端 
MIRA 
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e matrix.inverse() 8 EAIA EEE, SE Ae ES JE AEF Bll ES 
换 。 

。 svg.createSVGPoint() 生成 保 在 x 和 yy 数值 的 SVG 数据 对 象 。 
SVGPoint 对 象 在 访问 多 边 形 或 折线 时 使 用 。 自 己 创 建 的 唯一 原因 是 
用 于 下 一 个 方法 。 

e point.matrixTransform(matrix) 应 用 特定 矩阵 变换 来 计算 给 定 的 点 的 
位 置 。 


通过 这 些 方 法 ， 鼠标 事件 的 坐标 可 以 转换 到 星星 使 用 的 坐标 系 ， 然 后 使 
用 星星 的 边界 盒 来 把 它 转换 为 新 变 的 cx 和 cy 属性 的 对 象 边 界 盒 坐标 。 
如 果 更 改 的 是 正在 执行 的 动画 ， 中 心 点 的 移动 将 通过 给 effects 数组 添 
加 新 的 对 象 来 应 用 其 他 动画 效果 。 相 反 ， 如 果 切 换 是 由 键盘 事件 触发 ， 
cx 和 cy 将 被 重 置 为 元 素 的 中 心 。 


(5) 调 用 一 个 只 执行 一 次 的 动画 函数 来 初始 化 动画 ， 修 改 星星 的 填充 值 为 动 
图 和 案 ， 并 记录 动画 循环 的 开始 时 间 。 


(6) 定义 一 个 函数 (getProgress) 将 文档 的 时 间 戳 转化 为 动画 执行 时 间 与 动 

画 周期 的 比 。 如 果 你 想 通 过 缓 动 函 数 来 减 慢 或 加 快 动画 的 进度 ， 这 里 就 
是 进行 操作 的 地 方 。 

(7) 标识 每 个 动画 对 应 的 元 素 ， 并 把 它 存储 在 变量 中 以 便 快 速 访问 。 同 时 还 
把 from-to 语法 转化 为 from-by 的 格式 以 便 动 画 的 每 一 帧 中 的 数学 计算 
更 快 。 

(8) 最 后 ， 根 据 浏 览 器 啊 应 动画 帧 请 求 时 传递 给 回调 函数 (applyEffects) 
的 时 间 惟 ， 在 动画 的 每 个 阶段 应 用 变化 效果 。 效 果 是 通过 数据 对 象 数组 
来 定义 的 ， 每 个 对 象 的 结构 都 是 一 样 的 ， 所 以 可 以 通过 单个 国 数 来 计算 
当前 值 以 及 更 新 特定 元 素 上 相应 的 属性 。 


这 里 使 用 的 方法 仅仅 支持 简单 的 数值 插入 ， 且 只 支持 更 改 属 性 (包括 表 
现 属性 ) 。 如 果 想 要 给 颜色 、 复 杂 的 数据 列表 或 动画 样式 值 来 添加 动画 ， 
需要 添加 额外 的 代码 。 
(9) 在 动画 的 回调 中 ， 会 检查 动画 是 否 完 成 。 如 果 还 没有 完成 ， 就 请 求 另 一 
个 动画 帧 。 如 果 已 经 完成 ， 把 星星 切换 到 最 终 新 变 状 态 。 
唯一 的 限制 是 如 果 另 一 颗 星 星 上 有 交互 ， 当 前 星星 的 动画 会 被 中 止 。 这 是 
避免 冲突 所 必需 的 ， 因 为 这 里 只 有 一 个 泻 染 服务 来 绘制 所 有 星星 的 动画 状 
态 。 为 了 解决 这 个 问题 ， 你 需要 动态 为 每 个 要 添加 动画 的 元 素 单独 创建 演 
BARS (<radialGradient> 以 及 引用 它 的 <pattern>) 的 副本 。 这 些 DOM 
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BESEIRE, PTA PR SE DR EI FERI H. E He ae A KPH, 
当然 ， 两 个 交互 重 县 的 可 能 性 取决 于 每 个 动画 持续 多 长 时 间 。 对 于 用 户 交 
互动 画 ，1 秒 的 动画 实际 上 被 认为 是 相当 长 的 动画 。 

一 个 微小 的 交互 动画 就 需要 这 么 多 的 代码 。 因 此 ， 很 少 会 为 每 个 项 目 编写 
完整 的 自 定义 动画 脚本 。JavaScript 库 ， 例 如 Snap.svg (http://snapsvg.io/) , 
D3.js (https://d3js.org/), GreenSock Animation Platform 和 GSAP (https:// 
greensock.com/) 等 ， 提 供 了 有 效 控 制 动 画 时 间 和 中 间 插 值 的 方法 。 随 着 浏 
览 器 对 Web 动画 API 支持 程度 的 增加 ， 这 将 成 为 定义 特定 动画 效果 的 首选 
方法 。 
但 通过 切换 渲染 服务 来 创建 动画 和 给 泻 染 服务 组 件 添加 动画 的 整体 策略 在 
使 用 这 些 工具 时 依然 适用 。 也 就 是 说 ， 当 浏览 器 对 分 层 填 充 、 使 用 CSS Hr 
变 填 充 以 及 CSS 渐变 函数 的 过 渡 的 支持 程度 更 高 时 ， 这 种 特殊 效果 将 会 变 
得 更 加 容易 。 















































222 | #142 


附录 人 


颜色 关键 词 和 语法 





SVG F0 CSS 中 的 颜色 可 以 指定 为 精确 的 数值 ， 也 可 以 使 用 预定 义 的 颜色 关 

键 词 。 

自 定义 纯色 可 以 通过 以 下 任意 一 种 格式 来 指定 。 

e #RRGGBB ， 六 个 十 六 进 制 的 数字 ， 每 一 对 代表 一 种 颜色 通道 在 0 (00) 到 
255 (FF) 之 间 的 一 个 值 。 

。 #RGB ， 三 个 十 六 进 制 的 数字 ， 相 当 于 每 个 数字 出 现 两 次 的 六 位 版 本 。 

。 rgb(r,g,b) ， 三 个 0 到 255 之 间 的 整数 或 三 个 百分数 值 。 

。 hsl(h,s,l) ， 第 一 个 参数 (hue) 是 一 个 表示 色 轮 (相对 于 红色 ) 上 角度 
的 数值 ， 饱 和 度 和 亮度 值 是 百分数 。 

自 定义 部 分 透明 颜色 可 以 通过 以 下 两 个 函数 之 一 来 指定 。 

e rgba(r,g,b,a) ， 前 三 个 值 是 百分数 或 整数 ，a 的 值 是 0 到 1 之 间 的 小 数 。 

。 hsla(h,s,1,a) ， 参 数值 是 一 个 数值 ， 两 个 百分数 ， 之 后 是 0 到 1 之 间 的 
alpha 值 。 


命名 纯色 在 表 A-1 中 列 出 ， 同 时 还 给 出 了 与 之 等 价 的 十 六 进 制 、RGB 和 
HSL 格式 。 百 分 比 的 RGB 值 和 HSL 值 已 经 四 侈 五 人 为 整数 。 此 外 ， 颜 色 
关键 词 transparent 表示 为 rgba(0,0,0,0) 或 hsla(0,0%,0%,0)。 
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表 A-1 SVG 和 CSS 中 的 命名 颜色 

关键 字 TH penn RGB 百分比 HSL 

制 值 
R GERB R G B H S E 

AliceBlue #fof8ff |240 | 248 | 255 |94% |97% | 100% |208 |6% |97% 
antiqueWhite #faebd7 |250 |235 |215 |98% |92% |84% | 34 14% |91% 
aqua #00ffff |0 255 |255 |0% 100% | 100% |180 |100% |50% 
aquamarine #7fffd4 |127 |255 |212 |50% 100% |83% |160 |50% |75% 
azure #fOffff |240 |255 |255 |94% |100% |100% |180 |6% |97% 
beige #f5f5dc |245 |245 |220 |96% |96% |86% |60 |10% |91% 
bisque #ffe4c4 |255 |228 |196 |100% |89% |77% |33 |23% |88% 
black #000000 |0 0 0 0% 0% 0% 0 0% |0% 
blanchedAlmond |#ffebcd |255 |235 |205 |100% |92% |80% |36 |20% |90% 
blue #0000ff |0 0 255 |0% 0% 100% |240 |100% |50% 
blueViolet #8a2be2 |138 |43 |226 |54% |17% |89% |271 |81% |53% 
brown #a52a2a |165 |42 |42 |65% |16% |16% |0 75% |41% 
burlywood #deb887 |222 |184 |135 |87% |72% |53% |34 |39% |70% 
cadetBlue #5f9ea0 |95 158 |160 |37% |62% |63% |182 |41% |50% 
chartreuse #7fff00 |127 |255 |0 50% |100% |0% 90 100% | 50% 
chocolate #d2691e |210 |105 |30 |82% |41% |12% |25 |86% |47% 
coral #ff7f50 |255 |127 |80 |100% |50% |31% |16 |69% |66% 
cornflowerBlue |#6495ed |100 |149 |237 |39% |58% |93% |219 |58% |66% 
cornsilk #fff8dc |255 |248 |220 |100% |97% |86% |48 |14% |93% 
crimson #dc143c |220 |20 |60 |86% |8% 24% |348 |91% |47% 
cyan #00ffff 255 |255 |0% 100% | 100% |180 |100% |50% 
darkBlue #00008b 0 39 |0% 0% 55% |240 |100% |27% 
darkCyan #008b8b 139 |139 |0% 55% |55% |180 |100% |27% 
darkGoldenrod |#b8860b |184 |134 |11 |72% |53% |4% 43 |94% |38% 
darkGray #a9a9a9 |169 |169 |169 |66% |66% |66% |0 0% 66% 
darkGreen #006400 |0 100 |0 0% 39% |0% 120 |100% |20% 
darkGrey #a9a9a9 |169 |169 |169 |66% |66% |66% |0 0% 66% 
darkKhaki #bdb76b |189 |183 |107 |74% |72% |42% |56 |43% |58% 
darkMagenta #8b008b |139 |0 39 |55% |0% 55% |300 |100% |27% 
darkOliveGreen |#556b2f |85 107 |47 |33% |42% |18% |82 |56% |30% 
darkOrange #ff8c00 |255 | 140 |0 100% |55% |0% 33 100% | 50% 
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关键 字 十 六 进 十 进 制 什 RGB 百分比 HSL 
制 值 
R G |B R G B H S £ 
darkOrchid #9932cc |153 |50 |204 | 60% |20% |80% | 280 |75% |50% 
darkRed #8b0000 |139 |0 0 55% |0% 0% 0 100% | 27% 
darkSalmon #e9967a |233 |150 |122 |91% |59% |48% |15 |48% |70% 
darkSeaGreen #8fbc8f |143 |188 |143 |56% |74% |56% |120 |24% |65% 
darkSlateBlue |#483d8b |72 61 |139 |28% |24% |55% |248 |56% |39% 
darkSlateGray |#2f4f4f |47 79 |79 |18% |31% |31% |180 |41% |25% 
darkSlateGrey #2f4f4f | 47 79 |79 |18% |31% |31% |180 |41% |25% 
darkTurquoise #00ced1 |0 206 |209 |0% 81% |82% |181 |100% |41% 
darkViolet #9400d3 |148 |O 211 |58% |0% 83% |282 |100% |41% 
deepPink #ff1493 |255 |20 |147 |100% |8% 58% |328 |92% |54% 
deepSkyBlue #00bfff |0 191 |255 |0% 75% |100% |195 |100% |50% 
dimGray #696969 |105 |105 |105 |41% |41% |41% |0 0% |41% 
dimGrey #696969 |105 |105 |105 |41% |41% |41% |0 0% |41% 
dodgerBlue #1e90ff | 30 144 |255 | 12% |56% 00% |210 | 88% |56% 
firebrick #b22222 |178 |34 |34 | 70% | 13% 3% |0 81% |42% 
floralWhite #fffafO |255 | 250 |240 | 100% |98% |94% |40 |6% |97% 
forestGreen #228b22 |34 139 |34 |13% |55% 3% |120 |76% |34% 
fuchsia #ffooff |255 |O 255 |100% |0% 00% |300 |100% |50% 
gainsboro #dcdcdc |220 |220 |220 |86% |86% |86% |0 0% 86% 
ghostwhite #f8f8ff |248 |248 |255 |97% |97% 00% |240 |3% |99% 
gold #ffd700 |255 |215 |0 100% |84% |0% 51 100% | 50% 
goldenrod #daa520 |218 |165 |32 |85% |65% 3% 143 85% |49% 
gray #808080 |128 |128 |128 |50% |50% |50% |0 0% |50% 
green #008000 |0 128 |0 0% 50% |0% 120 |100% |25% 
greenYellow #adff2f |173 |255 |47 |68% 100% |18% |84 82% |59% 
grey #808080 |128 |128 |128 |50% |50% |50% |0 0% |50% 
honeydew #fOFFFO |240 |255 |240 |94% |100% |94% |120 |6% |97% 
hotPink #ff69b4 |255 |105 |180 |100% |41% |71% |330 |59% |71% 
indianRed #cd5c5c |205 |92 |92 |80% |36% |36% |0 55% |58% 
indigo #4b0082 |75 0 130 |29% |0% 51% |275 |100% |25% 
ivory #fffff0 |255 |255 |240 |100% | 100% |94% |60 |6% |97% 
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关键 字 十 六 进 十 进 制 值 RGB 百分比 HSL 

制 值 

R GERB R G B H S E 

khaki #f0e68c | 240 | 230 | 140 |94% |90% |55% |54 |42% |75% 
lavender #e6e6fa |230 | 230 |250 |90% |90% |98% |240 |8% |94% 
lavenderBlush |#fffof5 |255 |240 |245 |100% |94% |96% |340 |6% |97% 
lawnGreen #7cfc00 |124 |252 |0 49% |99% |0% 90 100% | 49% 
LemonChiffon #fffacd |255 |250 |205 | 100% |98% |80% |54 |20% |90% 
lightBlue #add8e6 |173 |216 |230 |68% |85% |90% |195 |25% |79% 
lightCoral #f08080 |240 |128 |128 |94% |50% |50% 10 47% |72% 
lightCyan #egffff |224 |255 |255 |88% |100% |100% |180 |12% |94% 
LightGoldenrod- 
Yellow #fafad2 |250 | 250 |210 |98% |98% |82% |60 | 16% |90% 
lightGray #d3d3d3 |211 |211 |211 |83% |83% |83% |0 0% |83% 
lightGreen #90ee90 |144 |238 |144 |56% |93% |56% |120 |39% |75% 
lightGrey #d3d3d3 |211 |211 |211 |83% |83% |83% |0 0% |83% 
lightPink #ffb6c1 |255 |182 |193 |100% |71% |76% |351 |29% |86% 
LightSalmon #ffa07a |255 | 160 | 122 | 100% |63% |48% |17 |52% | 74% 
lightSeaGreen | #20b2aa | 32 178 |170 |13% |70% |67% |177 |82% |41% 
lightSkyBlue #87cefa |135 |206 |250 |53% |81% |98% |203 |46% |75% 
lightSlateGray |#778899 |119 |136 |153 |47% |53% |60% |210 |22% |53% 
lightSlateGrey |#778899 |119 |136 |153 |47% |53% |60% |210 |22% |53% 
lightSteelBlue |#b0c4de |176 |196 |222 |69% |77% |87% |214 |21% |78% 
lightYellow #ffffe0 |255 |255 |224 |100% |100% |88% |60 |12% |94% 
lime #ooffoo |0 255 |0 0% 100% | 0% 120 | 100% | 50% 
LimeGreen #32cd32 | 50 205 |50 |20% |80% |20% | 120 |76% | 50% 
linen #fafOe6 | 250 | 240 | 230 |98% |94% |90% |30 |8% |94% 
magenta #ffooff |255 |0 255 |100% |0% 100% |300 |100% |50% 
maroon #800000 |128 |0 0 50% |0% 0% 0 100% | 25% 
ee #66cdaa |102 [205 |170 |40% | 80% |67% | 160 |50% | 60% 
mediumBlue #0000cd |0 0 205 | 0% 0% 80% | 240 | 100% | 40% 
mediumOrchid #ba55d3 | 186 |85 |211 |73% |33% | 83% |288 | 60% |58% 
mediumPurple #9370db |147 |112 |219 |58% |44% |86% |260 |49% | 65% 
mediumSeaGreen |#3cb371 |60 179 |113 |24% |70% |44% |147 |66% |47% 
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( 续 ) 
关键 字 十 六 进 eee RGB 百分比 HSL 
制 值 
G |B R G B H S L 

mediumS Late - 

Siue #7b68ee |123 |104 |238 |48% |41% |93% |249 |56% |67% 
se #60faga |0 |250 |154 |o% |98% |60% |157 |100% |49% 
mediumTurquoise | #48d1cc |72 209 |204 |28% |82% |80% |178 |66% |55% 
mediumVioletRed | #c71585 |199 |21 |133 |78% |8% 52% |322 |89% |43% 
midnightBlue #191970 |25 25 |112 |10% |10% |44% |240 |78% |27% 
mintCream #f5fffa |245 |255 |250 |96% |100% |98% |150 |4% |98% 
mistyRose #ffe4e1 |255 |228 |225 |100% |89% |88% |6 12% |94% 
moccasin #ffe4b5 |255 |228 |181 |100% |89% |71% |38 |29% |85% 
navajowhite #ffdead |255 |222 |173 |100% |87% |68% |36 32% |84% 
navy #000080 |0 0 128 | 0% 0% 50% | 240 | 100% | 25% 
oldLace #fdf5e6 |253 | 245 |230 |99% |96% |90% |39 |9% 195% 
olive #808000 |128 |128 |0 50% |50% |0% 60 |100% |25% 
oliveDrab #6b8e23 |107 |142 |35 |42% |56% |14% |80 |75% |35% 
orange #ffa500 |255 |165 |0 100% |65% |0% 39 |100% | 50% 
orangeRed #ff4500 |255 |69 |0 100% |27% |0% 16 100% | 50% 
orchid #da70d6 |218 |112 |214 |85% |44% |84% |302 |49% |65% 
paleGoldenrod #eee8aa |238 |232 |170 |93% |91% |67% |55 29% |80% 
paleGreen #98fb98 |152 |251 |152 |60% |98% |60% |120 |39% |79% 
paleTurquoise #afeeee |175 |238 |238 |69% |93% |93% |180 |26% |81% 
paleVioletRed |#db7093 |219 |112 |147 |86% |44% |58% |340 |49% |65% 
papayaWhip #ffefdS |255 |239 |213 |100% |94% |84% |37 16% |92% 
peachPuff #ffdab9 |255 |218 |185 |100% |85% |73% |28 |27% |86% 
peru #cd853f |205 |133 |63 |80% |52% |25% |30 |69% |53% 
pink #ffcOcb |255 |192 |203 |100% |75% |80% |350 |25% |88% 
plum #ddaOdd |221 |160 |221 |87% |63% |87% |300 |28% |75% 
powderBlue #b0e0e6 |176 | 224 | 230 |69% |88% |90% | 187 | 23% | 80% 
purple #800080 |128 |0 128 |50% |0% 50% |300 |100% |25% 
rebeccaPurple #663399 |102 |51 153 |40% |20% |60% |270 |67% |40% 
red #ff0000 |255 |0 0 100% |0% 0% 0 100% | 50% 
rosyBrown #bc8f8f |188 |143 |143 |74% |56% |56% |0 24% |65% 
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关键 字 Ta 十 进 制 什 RGB 百分比 HSL 

R G R G B H S E 
royalBlue #4169e1 | 65 105 25% |41% |88% |225 |71% |57% 
saddleBrown #8b4513 |139 |69 55% |27% |7% 25 |86% |31% 
salmon #fa8072 |250 |128 98% |50% |45% |6 54% |71% 
sandyBrown #f4a460 |244 |164 96% |64% |38% |28 61% |67% 
seaGreen #2e8b57 |46 139 18% |55% |34% |146 |67% |36% 
seashell #fff5ee |255 |245 100% |96% |93% |25 |7% |97% 
sienna #a0522d |160 |82 63% |32% |18% |19 |72% |40% 
silver #cOcOcO |192 |192 75% |75% |75% |0 0% |75% 
skyBlue #87ceeb |135 |206 53% |81% |92% |197 |43% |73% 
slateBlue #6a5acd |106 |90 42% |35% |80% |248 |56% |58% 
slateGray #708090 | 112 128 44% |50% |56% |210 |22% | 50% 
slateGrey #708090 |112 | 128 44% |50% |56% |210 |22% | 50% 
snow #fffafa |255 |250 100% |98% |98% |0 2% |99% 
springGreen #00ff7f |0 255 0% 100% |50% |150 |100% |50% 
steelBlue #4682b4 |70 130 27% |51% |71% |207 |61% |49% 
tan #d2b48c |210 |180 82% |71% |55% |34 |33% |69% 
teal #008080 |0 128 0% 50% |50% |180 |100% |25% 
thistle #d8bfd8 |216 |191 85% |75% |85% |300 |12% |80% 
tomato #ff6347 |255 |99 100% |39% |28% |9 72% |64% 
turquoise #40e0d0 |64 224 25% |88% |82% |174 |71% |56% 
violet #ee82ee |238 |130 93% |51% |93% |300 |45% |72% 
wheat #f5deb3 |245 |222 96% |87% |70% |39 |27% |83% 
white #ffffff |255 |255 100% |100% |100% |0 0% |100% 
whiteSmoke #f5f5f5 |245 |245 96% |96% |96% |0 0% |96% 
yellow #ffff00 |255 |255 100% |100% |0% 60 |100% | 50% 
yellowGreen #9acd32 |154 |205 60% |80% |20% |80 76% |50% 
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附录 B 


元 素 ， 元 素 属性 ， 样 式 属性 








该 指南 给 SVG 泻 染 服务 元 素 可 用 的 属性 及 其 默认 值 和 可 设置 的 值 提供 快速 
BF. 











<LinearGradient> 
颜色 结 点 绘制 为 与 渐变 矢量 垂直 (在 渐变 的 坐标 系 内 ) 的 平行 线 的 渐变 。 
id 

它 的 值 用 于 引用 该 渐变 。 

。 与 所 有 其 他 元 素 id 的 限制 相同 。 











x1 
渐变 矢量 起 点 的 水 平 位 置 。 
。 一 个 长 度 值 (在 用 户 坐 标 系 内 或 有 单位 ) 或 百分比 (相对 于 坐标 系 宽 
度 )。 
。 默认 值 为 0。 
y1 


渐变 矢量 起 点 的 垂直 位 置 。 


。 一 个 长 度 值 〈 在 用 户 坐 标 系 内 或 有 单位 ) 或 百分比 〈 相 对 于 坐标 系 高 
度 )。 
。 默认 值 为 0。 
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x2 
渐变 矢量 终点 的 水 平 位 置 。 
。 一 个 长 度 值 (在 用 户 坐 标 系 内 或 有 单位 ) 或 百分比 (相对 于 坐标 系 宽 
度 )。 
。 默认 值 为 100%。 
y2 
渐变 矢量 终点 的 垂直 位 置 。 
。 一 个 长 度 值 (在 用 户 坐 标 系 内 或 有 单位 ) 或 百分比 (相对 于 坐标 系 高 
度 )。 
。 默认 值 为 0。 
gradientUnits 


使 用 的 坐标 系 。 


。 值 为 userspaceOnUse 或 objectBoundingBox。 
。 默认 值 为 objectBoundingBox。 





























gradientTransform 
应 用 在 渐变 内 容 的 变换 ， 独 立 于 它 要 填充 的 形状 。 
。 空白 分 隔 的 变换 国 数 列表 : translate(tx,ty), scale(s), scale(sx, 
sy), rotate(a), rotate(a,cx,cy), skewX(a) 和 skewY(a). 
。 每 个 变换 的 参数 都 是 不 带 单位 的 数字 (在 SVG 1 的 语法 中 ) ， 长 度 被 
解析 为 用 户 单位 (px)， 角 度 被 解析 为 度数 。 
。 默认 值 为 没有 变换 。 
spreadMethod 
用 在 超出 渐变 矢量 起 点 和 终点 的 填充 内 容 的 策略 。 


。 {HX pad, reflect 或 repeat. 
。 默认 值 为 pad。 
xlink:href 

引用 另 一 个 渐变 来 作为 当前 渐变 的 模板 。 

。 指向 目标 片段 的 URL， 它 的 值 必须 匹配 相同 文档 内 <LinearGradient> 
或 <radialGradient> 元 素 的 ID, 
引用 的 元 素 的 所 有 属性 作为 当前 元 素 的 默认 值 。 
如 果 当 前 元 素 不 包含 任何 <stop> 元 素 ， 使 用 引用 的 元 素 的 结 点 。 
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。 在 XML 文档 中 (dG SVG), xlink 前 级 必须 附属 于 XLink 命名 空间 ， 
http://www.w3.org/ 1999/xlink, {FA xmLns:xLink 属性 。 








<radialGradient> 
颜色 结 点 沿 着 起 点 向 外 部 圆 发 散 的 渐变 。 
id 

它 的 值 用 于 引用 该 渐变 。 

。 与 所 有 其 他 元 素 id 的 限制 相同 。 














cx 
中 心 点 的 水 平 位 置 。 
。 一 个 长 度 值 (在 用 户 坐 标 系 内 或 有 单位 ) 或 百分比 (相对 于 坐标 系 宽 
。 i 50%. 

cy 
中 心 点 的 垂直 位 置 。 
。 一 个 长 度 值 〈 在 用 户 坐 标 系 内 或 有 单位 ) 或 百分比 (相对 于 坐标 系 高 

BE). 


。 BRIMEA 50%. 


圆 的 半径 。 

。 一 个 长 度 值 (在 用 户 坐 标 系 内 或 有 单位 ) 或 百分比 (与 坐标 系 对 角 线 
长 度 成 比例 ， 使 对 角 线 始终 为 V2 x 100%). 

。 默认 值 为 50% 。 





负 值 会 报错 。 
fx 
焦点 的 水 平 位 置 。 
。 一 个 长 度 值 〈 在 用 户 坐 标 系 内 或 有 单位 ) 或 百分比 〈 相 对 于 坐标 系 宽 
度 )。 


。 默认 值 与 cx 的 值 相同 。 
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fy 
焦点 的 垂直 位 置 。 
。 一 个 长 度 值 (在 用 户 坐 标 系 内 或 有 单位 ) 或 百分比 (相对 于 坐标 系 高 
度 )。 
。 默认 值 与 cy 的 值 相同 。 
gradientUnits 


使 用 的 坐标 系 。 


。 值 为 userspaceOnUse 或 objectBoundingBox。 
。 默认 值 为 objectBoundingBox。 








gradientTransform 

应 用 在 渐变 内 容 的 变换 ， 独 立 于 它 要 填充 的 形状 。 

。 语法 和 可 选 值 与 <LinearGradient> 相同 。 
spreadMethod 

用 在 超出 最 外 层 圆 的 填充 内 容 的 策略 。 

。 语法 和 可 选 值 与 <LinearGradient> 相同 。 
xlink:href 

引用 另 一 个 渐变 来 作为 当前 渐变 的 模板 。 

。 语法 和 可 选 值 与 <LinearGradient> 相同 。 








<stop> 


渐变 内 的 一 个 固定 值 。 
offset 
沿 着 渐变 矢量 或 射线 定位 该 值 对 应 的 距离 。 
。 0 到 1 之 间 的 数字 或 百分数 。 
。 它 的 值 被 限制 在 [0~1] 或 [0%~100%] 的 范围 内 。 
。 结 点 必须 按照 偏 移 增 长 的 顺序 排列 ， 如 果 不 这 样 ， 偏 移 值 会 被 调整 为 
之 前 的 最 大 值 。 
。 SVG 1.1 中 官方 没有 说 明 默 认 值 ;SVG 2 和 大 多 数 浏览 器 中 默认 值 为 0。 
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stop-color (表现 属性 ) 
用 在 该 结 点 的 颜色 。 


。 任何 浏览 器 支持 的 合法 的 颜色 定义 。 
。 默认 为 black。 


stop-opacity 〈 表 现 属 性 ) 
用 在 该 结 点 的 aLpha 值 。 


。 0 到 1 之 间 的 数字 。 
。 默认 值 为 1。 


<pattern> 
一 个 泻 染 服务 ， 它 定义 一 个 用 于 填充 其 他 元 素 的 自 定义 SVG 内 容 的 区 域 ， 
根据 需要 在 矩形 网 格 中 进行 重复 。 
id 
它 的 值 用 于 引用 该 渐变 。 
。 与 所 有 其 他 元 素 id 的 限制 相同 。 








HAF E RER EE PA AAC hs 


。 一 个 长 度 值 〈 在 用 户 坐 标 系 内 或 有 单位 ) 或 百分比 〈 相 对 于 坐标 系 宽 
度 )。 
。 默认 值 为 0。 


y 
相对 于 图 案 瓷 砖 左上 角 的 垂直 偏 移 。 
。 一 个 长 度 值 (在 用 户 坐 标 系 内 或 有 单位 ) 或 百分比 〈 相 对 于 坐标 系 高 
度 )。 
。 默认 值 为 0。 
width 
每 个 图 案 瓷 砖 的 宽度 。 
。 一 个 长 度 值 (在 用 户 坐 标 系 内 或 有 单位 ) 或 百分比 〈 相 对 于 坐标 系 宽 
RE). 
。 默认 值 为 0， 此 时 禁止 浑 染 图 案 。 
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负 值 会 报错 。 

















height 
每 个 图 案 瓷砖 的 高 度 。 
一 个 长 度 值 〈 在 用 户 坐 标 系 内 或 有 单位 ) 或 百分比 〈 相 对 于 坐标 系 高 
RE). 
默认 值 为 0， 此 时 禁止 泻 染 图 案 。 
负 值 会 报错 。 
patternUnits 


x, y, width 和 height 使 用 的 坐标 系 。 


值 为 userspaceOnUse 或 objectBoundingBox. 
默认 值 为 objectBoundingBox。 





patternContentUnits 

绘制 图 案子 内 容 所 使 用 的 坐标 系 。 

。 值 为 userSpace0nUse 或 objectBoundingBox. 
默认 值 为 userSpaceO0nUse。 
如 果 指 定 了 viewBox 则 没有 效果 。 
值 为 objectBoundingBox 时 实现 为 对 用 户 单位 非 均 匀 缩 放 ， 它 不 会 为 

百分比 长 度 创建 一 个 新 的 参照 。 
viewBox 
声明 一 个 用 于 图 案 内 容 的 自 定 义 坐 标 系 。 
四 个 数字 的 列表 ， 以 空格 或 逗号 分 隔 。 
数字 代表 的 值 ， 依 次 为 : 最 小 的 x， 最 小 的 y， 宽 ， 高 。 
宽度 值 和 高 度 值 必 须 为 正 。 

。 默认 情况 下 ， 坐 标 系 通过 patterncontentunits 来 控制 。 

。 viewBox 实现 为 一 个 缩放 变换 , 且 不 会 为 百分比 长 度 创建 一 个 新 的 参照 。 

preserveAspectRatio 

当 viewBox 定义 的 宽 高 比 与 图 案 姿 砖 的 宽 高 比 不 匹配 时 使 用 的 缩放 和 对 

齐 策略 。 

{HA none 或 者 一 个 对 齐 值 后 紧 跟 meet 或 slice. 

对 章 值 是 一 个 单独 的 单词 xMxxYMxx， 其 中 Mxx 为 Min, Mid, Max 之 一 。 
默认 值 为 xMidYMid meet. 

只 有 在 指定 了 viewBox 属性 时 才 有 效果 。 
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patternTransform 
应 用 在 图 案 盗 砖 和 图 案 内 容 的 变换 ， 独 立 于 它 要 填充 的 形状 。 
。 语法 和 可 选 值 与 <LinearGradient> 的 gradientTransform 属性 相同 。 
。 默认 值 为 没有 变换 。 
xlink:href 
引用 另 一 个 图 案 来 作为 当前 图 案 的 模板 。 
。 指向 目标 片段 的 URL， 它 的 值 必 须 匹 配 相 同文 档 内 <pattern> 元 素 
的 ID。 
。 引用 的 元 素 的 所 有 属性 作为 当前 元 素 的 默认 值 。 
。 如 果 当 前 元 素 不 包含 任何 子 元 素 ， 则 使 用 引用 的 元 素 的 图 案 内 容 。 
。 在 XML 文档 中 (包括 SVG), xlink 前 缀 必须 附属 于 XLink 命名 空间 ， 
http://www.w3.org/ 1999/xlink， 使 用 xmlns:xlink 属性 。 
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作者 介绍 

Amelia Bellamy-Royds 是 一 位 科技 领域 内 的 自由 撰 稿 人 。 她 在 Web 设计 圈 内 
因 关 于 SVG 的 著作 而 出 名 。Amelia 是 W3C SVG 工作 组 的 特 邀 专家 ， 并 且 
积极 参与 SVG 辅助 工作 组 的 工作 。 她 通过 参与 在 线 社区 (例如 Web Platform 
Docs, Stack Exchange 和 Codepen) 来 帮助 促进 Web 标准 和 设计 的 发 展 。 
Amelia 对 SVG 的 兴趣 来 自 于 数据 可 视 化 的 工作 ， 并 建立 在 她 获得 生物 信息 
学 理学 学 士 时 学 到 的 编程 基础 之 上 。 从 那 以 后 ， 她 开始 从 事 科 学 、 健 康 和 
环境 政策 的 研究 ， 且 获得 了 新 闻 学 硕士 学 位 。Amelia 目前 居住 在 加 拿 大 的 
艾 伯 塔 省 埃 德 蒙 顿 市 。 如 果 她 不 在 电脑 旁 ， 很 可 能 在 打 理 她 的 菜园 或 外 出 
享受 现场 音乐 。 

Kurt Cagle 曾经 是 SVG 工作 组 的 成 员 ， 且 在 2004 年 出 版 了 第 一 个 本 关于 
SVG 的 书 。 目 前 是 作为 W3C Xforms 工作 组 的 特 邀 专家 ， 他 在 为 美国 国家 
档案 馆 工 作 之 后 ， 成 为 国会 图 书馆 的 XML 数据 架构 师 。 他 从 2003 年 以 来 
一 直 是 O'Reilly Media 的 定期 投稿 者 ， 并 且 还 在 2008 年 至 2009 年 期 间 担任 
在 线 编 辑 。 


封面 介绍 

本 书 封面 上 的 动物 是 藏族 血 维 (Ithaginis cruentus tibetanus)。 这 种 小 的 ， 像 
恼 克 一 样 的 锥 鸡 在 整个 不 丹东 部 和 西藏 南部 山区 的 森林 地 区 数量 稳定 。 整 
个 夏天 可 以 在 高 海拔 地 区 发 现 它们 ， 秋 天 和 冬天 随 着 降雪 量 的 增加 它们 会 
退回 到 山谷 。 

血 维 上 身 羽 毛 是 蓝 灰 色 的 ， 下 身 有 一 些 人 苹果 绿 的 羽毛 。 该 物种 的 通用 名 称 
指 的 是 它们 胸部 的 羽毛 ， 叶 典型 的 明亮 的 深 红色 ,就 像 血 还 一 般 。 这 些 动 
物 还 可 以 通过 红色 的 脚 和 红色 的 眼睛 来 区 分 。 

雄性 通常 1.5 英尺 长 ， 肉 性 略 小 ， 但 颜色 更 加 和 柔和、 均匀。 它们 的 强壮 的 不 
子 用 于 抓 取 食物 ， 主 要 是 绿色 植物 ， 如 苔 其 、 蕨 类 植物 和 松树 枝 。 

血 维 并 不 特别 擅长 于 飞行 ， 它 们 会 在 4 月 下 身 和 5 月 初 开始 在 地 面 上 筑 
TEES POR IRL (通常 六 或 七 个 )。 如 果 它 们 感觉 到 了 危险 ,就 会 将 巢 
穴 移 到 一 个 新 的 位 置 或 遗 齐 。 小 鸡 会 在 6 月 中 自 团 出， 并 且 和 它 的 妈妈 在 
一 起 直到 冬天 。 

O'Reilly 封面 上 的 许多 动物 都 濒临 灭绝 ， 它 们 对 于 世界 来 说 非常 重要 。 要 想 
了 解 更 多 关于 如 何 提 供 帮 助 的 信息 ， 请 访问 animals.oreilly.com, 

封面 上 的 动物 是 Karen Montgomery 基于 Wood’s Natural History 中 的 一 个 雕 
刻 品 所 做 。 
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作者 : Kyle Simpson 
译 者 : 单 业 等 





响应 式 Web 设计 : HTML5 #1 CSS3 实战 (第 2 版 ) 





© 围绕 实战 案例 
© 全 面 讲解 与 响应 式 设计 相关 的 现代 Web 技 术 


作者 : Ben Frain 
译 者 : DAA 














Angular 权威 教程 


令 Angular 领 域 里 程 碑 式 著作 

令 全 面 详 尽 、 通 俗 易 懂 ， 带 你 轻松 领悟 新 一 代 Web 开 发 精髓 

@ Google Angular 项 目 经 理 兼 主管 Naomi Black, Google 
开发 技术 推广 部 大 中 华 区 主管 栾 跃 作 序 推荐 


作者 : Ari Lerner 等 
译 者 : Nice Angular 社区 
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CSS 揭 秘 


全 新 解答 网 页 设计 经 典 难题 








CSS 揭秘 











@ CSS 一 姐 Lea Verou 作 品 
涵盖 7 大 主题 ，47 个 Css 技巧 4 近年 来 最 重要 的 CSS 技 术 书 





© 全 新 解答 网 页 设计 经 典 难题 
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ie 作者 : Lea Verou 
译 者 : CSS 魔法 














Meteor 实战 


令 Meteor 之 父 作 序 推荐 ， 全 栈 开发 必 读 
人 直击 Web/ 移 动 应 用 开发 痛 点 
令 通过 实例 详细 讲解 Meteor 应 用 开发 全 流程 


作者 : Stephan Hochhaus , Manuel Schoebel 
译 者 : 杨 学 辉 








学 习 JavaScript 数据 结构 与 算法 (第 2 版) 


用 JavaScript 学 习 常 用 的 数据 结构 和 算法 ， 高 效 解决 计算 机 
科学 中 的 常见 问题 

学 习 JavaScript 

数据 结构 与 算法 m) 


作者 : Loiane Groner 
译 者 : 邓 钢 等 








在 线 出 版 , 电子 书 ,《 码 农 》 杂 志 






re . 
Tae 
kh, 
re =, 
回复 “Web 开 发 ”查看 相关 书 单 


G 
微 博 连接 
关注 @ 图 灵 教 育 每 日 分 享 上 T 好 书 


B 


QQ 连接 


A 


RZ SABI. 218139230 
图 灵 读 者 官方 群 [[; 164939616 





图 灵 社 区 


iTuring.cn 


, 图 灵 访 谈 


O'REILLY” 





深入 理解 SVG 


作为 W3C 的 开放 标准 ，SVG 被 越 来 越 多 的 开发 者 所 关 
注 。SVG 不 只 是 简单 的 矢量 图 ， 还 可 以 加 上 更 复杂 的 
绘画 和 更 细致 的 效果 ， 包 括 泻 染 、 渐 变 、 应 用 到 文 
本 ， 甚 至 可 以 添加 照片 。 


本 书 深入 介绍 SVG 绘画 。 主 要 内 容 如 下 。 


E SVG 泻 染 模型 如 何 实现 描 边 和 填充 


E 标准 颜色 的 应 用 ， 自 定义 颜色 ， 创 建 颜色 
模板 


E 透明 度 的 设置 

E 如 何 控制 线性 渐变 在 要 泻 染 的 形状 内 移动 
a 重复 线性 渐变 

E 磁 贴 、 纹 理 和 图 片 图 案 

E 如 何在 文本 上 应 用 泻 染 服务 
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